Phoenix provides a built-in JS validation object to help us do front-end form validation.

Include Phoenix Validation:


// Custom selector and options
\Phoenix\Script\PhoenixScript::formValidation('#my-form', [
    'scroll' => [
        'enabled'  => true,
        'offset'   => -100,
        'duration' => 1000


Add required to form field:

// In FieldDefinition


OR just add it to HTML

<input name="title" type="text" required />

Then Validation will block form submit action if this input is empty, and auto scroll to this input:


You can also add required to class attribute to enable validation.

Validate Values

We can check input values matches some formats or not, and show warning and hint.

Add validate-xxx class to form field:

// In FieldDefinition


Now if input has value and it not matches the format you set, validator will show warning to this input:


Validator will be ignored if input has no value, only checked if user typed something in this input.

Available Default Validators:

  • validate-password
  • validate-numeric
  • validate-email
  • validate-url
  • validate-alnum
  • validate-color
  • validate-creditcard
  • validate-ip

Add Custom Validator

You can add your own validators in runtime. Here we add a password check validator.

// Get Validation object
var validation = $('#admin-form').validation();

// Add validator
validation.addValidator('password-check', function (value, $input) {
    return /^\S[\S ]{2,98}\S$/.test(value) && $('.input-passwird').val() == value;

This validator will check password value is valid string and matches input.input-password value.

Hint Text

We can add text hint to a validator:

// Add validator
validation.addValidator('url', function(value, element) {
    value = punycode.toASCII(value);
    var regex = /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/[^\s]*)?$/i;
    return regex.test(value);
}, {notice: 'Not a valid URL'})


You can also use callback to generate hint text:

// Add validator
validation.addValidator('url', function(value, element) {
    // ...
}, {notice: function ($input, validation) {
    return 'Input: ' + $input.attr('name') + ' is invalid.';

Hint Text By HTML Attributes

Use data-{type}-message to configure your messages.

    ->attr('data-warinig-message', 'Please enter vaild email.');
    ->attr('data-error-message', 'Please enter your email.');
    ->attr('data-success-message', 'OK');

Only support success, warning, error types.

Call Validation By JS

You can manually call validation by JS code without a submit event:

// Validate all inputs

// Add field to input queue to validate

// Validate one input

If you found a typo or error, please help us improve this document.