J plugin

Allows to use FormValidation as a jQuery plugin

Usage

The following piece of code is the starting point to use the J plugin:




    


    
...
$(document).ready(function() { $('#demoForm').formValidation({ // Options fields: { ... }, plugins: { ... }, }); // It's the same as FormValidation.formValidation( document.getElementById('demoForm'), { fields: { ... }, plugins: { ... }, } ); });

The sample code above assumes that the FormValidation files are placed inside the vendors directory. You might need to change the path depending on where you place them on the server.

After initializing the form with the plugin using $(form).formValidation(options), there are two ways to call the plugin method:


// Get plugin instance
const fv = $('#demoForm').data('formValidation');

// and then call method
// Replace METHOD_NAME with the real method name
fv.METHOD_NAME(parameters)

or


// Replace METHOD_NAME with the real method name    
$('#demoForm').formValidation(METHOD_NAME, parameters);

The first way mostly returns the FormValidation.Core instance, meanwhile the second one always returns the jQuery object representing the form. It's possible to chain methods as below:


// The first way
$('#demoForm')
    .data('formValidation')
    .updateFieldStatus('birthday', 'NotValidated')
    .validateField('birthday');

// The second one
$('#demoForm')
    .formValidation('updateFieldStatus', 'birthday', 'NotValidated')
    .formValidation('validateField', 'birthday');

Basic example




    
    
    


    
Product name
Price ($)
Size
Available in store
$(document).ready(function() { $('#demoForm').formValidation({ fields: { name: { validators: { notEmpty: { message: 'The name is required' }, stringLength: { min: 6, max: 30, message: 'The name must be more than 6 and less than 30 characters long' }, regexp: { regexp: /^[a-zA-Z0-9_]+$/, message: 'The name can only consist of alphabetical, number and underscore' } } }, price: { validators: { notEmpty: { message: 'The price is required' }, numeric: { message: 'The price must be a number' } } }, 'size[]': { validators: { notEmpty: { message: 'The size is required' } } }, availability: { validators: { notEmpty: { message: 'The availability option is required' } } }, }, plugins: { trigger: new FormValidation.plugins.Trigger(), tachyons: new FormValidation.plugins.Tachyons(), submitButton: new FormValidation.plugins.SubmitButton(), icon: new FormValidation.plugins.Icon({ valid: 'fa fa-check', invalid: 'fa fa-times', validating: 'fa fa-refresh', }), }, }); });