Developing
It's quite easy to develop new validator
Writing new validator
A validator has to follow the syntax:
(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));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:
$(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
}
}
}
}); 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:
(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)); 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.
(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));<form id="passwordBootstrapForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="pwd" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-primary">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
FormValidation.Validator.password = {
validate: function(validator, $field, options) {
var value = $field.val();
if (value === '') {
return true;
}
if (value.length < 8) {
return false;
}
if (value === value.toLowerCase()) {
return false;
}
if (value === value.toUpperCase()) {
return false;
}
if (value.search(/[0-9]/) < 0) {
return false;
}
return true;
}
};
$('#passwordBootstrapForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
pwd: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
password: {
message: 'The password is not valid'
}
}
}
}
});
});
</script><form id="passwordBootstrapForm">
<div class="form-group row">
<label class="col-xs-3 col-form-label">Password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="pwd" />
</div>
</div>
<div class="form-group row">
<div class="col-xs-5 offset-xs-3">
<button type="submit" class="btn btn-primary">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
FormValidation.Validator.password = {
validate: function(validator, $field, options) {
var value = $field.val();
if (value === '') {
return true;
}
if (value.length < 8) {
return false;
}
if (value === value.toLowerCase()) {
return false;
}
if (value === value.toUpperCase()) {
return false;
}
if (value.search(/[0-9]/) < 0) {
return false;
}
return true;
}
};
$('#passwordBootstrapForm').formValidation({
framework: 'bootstrap4',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
pwd: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
password: {
message: 'The password is not valid'
}
}
}
}
});
});
</script><form id="passwordFoundationForm" class="fv-form-horizontal">
<div class="row">
<div class="small-3 columns">
<label class="right inline">Password</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="password" name="pwd" />
</div>
</div>
<div class="row">
<div class="small-9 small-push-3 columns">
<button type="submit" class="button small">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
FormValidation.Validator.password = {
validate: function(validator, $field, options) {
var value = $field.val();
if (value === '') {
return true;
}
if (value.length < 8) {
return false;
}
if (value === value.toLowerCase()) {
return false;
}
if (value === value.toUpperCase()) {
return false;
}
if (value.search(/[0-9]/) < 0) {
return false;
}
return true;
}
};
$('#passwordFoundationForm').formValidation({
framework: 'foundation5',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
pwd: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
password: {
message: 'The password is not valid'
}
}
}
}
});
});
</script><form id="passwordPureForm" class="pure-form pure-form-aligned">
<div class="pure-control-group">
<label>Password</label>
<input type="password" class="form-control" name="pwd" />
</div>
<div class="pure-control-group">
<label></label>
<button type="submit" class="pure-button pure-button-primary">Validate</button>
</div>
</form>
<script>
$(document).ready(function() {
FormValidation.Validator.password = {
validate: function(validator, $field, options) {
var value = $field.val();
if (value === '') {
return true;
}
if (value.length < 8) {
return false;
}
if (value === value.toLowerCase()) {
return false;
}
if (value === value.toUpperCase()) {
return false;
}
if (value.search(/[0-9]/) < 0) {
return false;
}
return true;
}
};
$('#passwordPureForm').formValidation({
framework: 'pure',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
pwd: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
password: {
message: 'The password is not valid'
}
}
}
}
});
});
</script><form id="passwordSemanticForm" class="ui grid form fv-form-horizontal">
<div class="row field">
<label class="four wide column">Password</label>
<div class="eight wide column">
<div class="ui input icon">
<input type="password" name="pwd" />
</div>
</div>
</div>
<div class="row">
<label class="four wide column"></label>
<div class="eight wide column">
<button type="submit" class="ui primary button">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
FormValidation.Validator.password = {
validate: function(validator, $field, options) {
var value = $field.val();
if (value === '') {
return true;
}
if (value.length < 8) {
return false;
}
if (value === value.toLowerCase()) {
return false;
}
if (value === value.toUpperCase()) {
return false;
}
if (value.search(/[0-9]/) < 0) {
return false;
}
return true;
}
};
$('#passwordSemanticForm').formValidation({
framework: 'semantic',
icon: {
valid: 'checkmark icon',
invalid: 'remove icon',
validating: 'refresh icon',
feedback: 'fv-control-feedback'
},
fields: {
pwd: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
password: {
message: 'The password is not valid'
}
}
}
}
});
});
</script><form id="passwordUikitForm" class="uk-form uk-form-horizontal">
<div class="uk-form-row">
<label class="uk-form-label">Password</label>
<div class="uk-form-controls">
<input type="password" name="pwd" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label"></label>
<div class="uk-form-controls">
<button type="submit" class="uk-button uk-button-primary">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
FormValidation.Validator.password = {
validate: function(validator, $field, options) {
var value = $field.val();
if (value === '') {
return true;
}
if (value.length < 8) {
return false;
}
if (value === value.toLowerCase()) {
return false;
}
if (value === value.toUpperCase()) {
return false;
}
if (value.search(/[0-9]/) < 0) {
return false;
}
return true;
}
};
$('#passwordUikitForm').formValidation({
framework: 'uikit',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
pwd: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
password: {
message: 'The password is not valid'
}
}
}
}
});
});
</script>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.
(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));Now, the form shows exactly condition that we want the password to satisfy.
<form id="securePasswordForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="pwd" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-primary">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(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;
}
};
$('#securePasswordForm').formValidation({
framework: 'bootstrap',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
pwd: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
securePassword: {
message: 'The password is not valid'
}
}
}
}
});
});
</script><form id="securePasswordForm">
<div class="form-group row">
<label class="col-xs-3 col-form-label">Password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="pwd" />
</div>
</div>
<div class="form-group row">
<div class="col-xs-5 offset-xs-3">
<button type="submit" class="btn btn-primary">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(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;
}
};
$('#securePasswordForm').formValidation({
framework: 'bootstrap4',
feedbackIcons: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
pwd: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
securePassword: {
message: 'The password is not valid'
}
}
}
}
});
});
</script>