--- layout: default title: Developing permalink: /developing/ prev: url: /examples/ title: Examples ---

Developing

It's quite easy to develop new validator

{% include share.html %}

Writing new validator

A validator has to follow the syntax:

{% highlight javascript %} (function($) { FormValidation.Validator.validatorName = { /** * @param {FormValidation.Base} validator The validator plugin instance * @param {jQuery} $field The jQuery object represents the field element * @param {Object} options The validator options * @returns {Boolean} */ validate: function(validator, $field, options) { // You can get the field value // var value = $field.val(); // // Perform validating // ... // // return true if the field value is valid // otherwise return false } }; }(window.jQuery)); {% endhighlight %}

The validator must implement validate() method that returns true if the field is valid, or false otherwise.

The validator is ignored if the validate method returns null

validatorName is the validator name. Since the validators are distinct by the names, validatorName has to be different with built-in validators.

To apply the validator to particular field:

{% highlight javascript %} $(form).formValidation({ fields: { fieldName: { // Replace validatorName with the name of validator // validatorOptions will be passed as third parameter of the // validate(validator, $field, options) method validators: { validatorName: validatorOptions } } } }); {% endhighlight %}
To see how built-in validators are developed, you can look at their sources located inside the src/js/validator directory.

Dynamic message

If you want to set dynamic error message, the validator must return an object that consists of valid and message members:

{% highlight javascript %} (function($) { FormValidation.Validator.validatorName = { validate: function(validator, $field, options) { // ... Do your logic checking if (...) { return { valid: true, // or false message: 'The error message' } } return { valid: false, // or true message: 'Other error message' } } }; }(window.jQuery)); {% endhighlight %}
Look at this example if you want to attach more data to the returned value and reuse them later

Example

The following example illustrates how to develop a simple validator which validate a password. The validator will treat a password as valid, if it satisfies all the conditions below:

  • Must be more than 8 characters long
  • Must contain at least one upper case character
  • Must contain at least one lower case character
  • Must contain at least one digit

In fact, you can add more conditions to make a secure password.

{% highlight javascript %} (function($) { FormValidation.Validator.password = { validate: function(validator, $field, options) { var value = $field.val(); if (value === '') { return true; } // Check the password strength if (value.length < 8) { return false; } // The password doesn't contain any uppercase character if (value === value.toLowerCase()) { return false; } // The password doesn't contain any uppercase character if (value === value.toUpperCase()) { return false; } // The password doesn't contain any digit if (value.search(/[0-9]/) < 0) { return false; } return true; } }; }(window.jQuery)); {% endhighlight %} {% include demo/tabs.html id="password" frameworks="bootstrap,bootstrap4,foundation5,pure,semantic,uikit" dir="password" codes="programmatic" %}

Basically, the validator works fine. It returns false if the password doesn't satisfy any of conditions we define. The limitation here is that the user don't know which condition the password doesn't pass. It informs the same The password is not valid message in all cases.

Using dynamic message ability, it's easy to make the validator more friendly.

{% highlight javascript %} (function($) { FormValidation.Validator.securePassword = { validate: function(validator, $field, options) { var value = $field.val(); if (value === '') { return true; } // Check the password strength if (value.length < 8) { return { valid: false, message: 'The password must be more than 8 characters long' }; } // The password doesn't contain any uppercase character if (value === value.toLowerCase()) { return { valid: false, message: 'The password must contain at least one upper case character' } } // The password doesn't contain any uppercase character if (value === value.toUpperCase()) { return { valid: false, message: 'The password must contain at least one lower case character' } } // The password doesn't contain any digit if (value.search(/[0-9]/) < 0) { return { valid: false, message: 'The password must contain at least one digit' } } return true; } }; }(window.jQuery)); {% endhighlight %}

Now, the form shows exactly condition that we want the password to satisfy.

{% include demo/tabs.html id="secure-password" frameworks="bootstrap,bootstrap4" dir="secure-password" codes="programmatic" %}

Related example

{% include pagination.html %}