usage

Because this plug-in is designed with window s and dom, it only applies to the front-end js. First, JS is introduced before the end of the body.

<script type="text/javascript" src="validate.min.js"></script>

Then create an instance object in script.

var validator = new FormValidator('example_form', [{
    name: 'req',
    display: 'required',
    rules: 'required'
}, {
    name: 'alphanumeric',
    rules: 'alpha_numeric'
}, {
    name: 'password',
    rules: 'required'
}, {
    name: 'password_confirm',
    display: 'password confirmation',
    rules: 'required|matches[password]'
}, {
    name: 'email',
    rules: 'valid_email',
    depends: function() {
        return Math.random() > .5;
    }
}, {
    name: 'minlength',
    display: 'min length',
    rules: 'min_length[8]'
}], function(errors, event) {
    if (errors.length > 0) {
        // Show the errors
    }
});

The syntax is as follows

new FormValidator(formName, fields, callback)

formName is the name of form, which is obtained by assigning the name attribute of form.

<form name="myForm"></form>

There are four properties, of which the required attributes include:

• Name represents the value of the attribute name of the form
• Rules represent rules that you want to match

optional attributes include:

• diaplay sets the field name to display when an error occurs. Default parameter
• depends sets a function to trigger before validating the entire fields, and if false is returned, the rules are not validated.

fields is an array that must contain objects and properties of objects.
callback takes two parameters.

1.errors
If the length of errors is greater than 0, the validation fails. Error contains Objects, which have five attributes.

• id of id element
• Name value of name element
• Message error message
• messages error message
• Rules that make mistakes
  2.event
  If the browser supports it, trigger onsubmit events.

Expansibility

You can add your own rules to the instance. callback_is required.

rules: 'required|callback_check_password'

Then call the registerCallback function and the optional setMessage function.

validator.registerCallback('check_password', function(value) {
    if (passwordIsStrong(value)) {
        return true;
    }

    return false;
})
.setMessage('check_password', 'Please choose a stronger password using at least 1 number.');

Callback rules
- If the required rule is present, a callback will be fired once all other validation rules pass.
- If the field is not required and it is empty, the callback will not be called unless condition #3 is met.
- A callback will always be called if it is preceded by an '!' i.e. rules: '!callback_myCustomCallback'
Available methods
- setMessage
- registerCallback
- registerConditional
The setMessage method replaces the display information and accepts two parameters.

validator.setMessage('required', 'You must fill out the %s field.');

The registerCallback method, which adds a validation option, accepts two parameters.

validator.registerCallback('check_email', function(value) {
    if (emailIsUnique(value)) {
        return true;
    }

    return false;
});

The registerConditional method adds a conditional function before validating the form.

{
    name: 'first_name',
    rules: 'required',
    depends: 'checkForRandomNumber'
}

validator.registerConditional('checkForRandomNumber', function(field) {
    return Math.random() > .5;
});

Module design

An immediate execution function puts the entire FormValidator class in a non-global scope to avoid variable contamination.

(function(window , document , undefined){})(window , document);

But you need to be able to access this class outside of scope, so you add this sentence to the immediate execution function. FormValidator is regarded as an attribute of global window, which not only guarantees the encapsulation of FormValidator, but also accesses FormValidator globally through window.FormValidator.

window.FormValidator = FormValidator;

Finally, modular exports conforming to the commonjs specification are added.

if (typeof module !== 'undefined' && module.exports) {
    module.exports = FormValidator;
}