Skip to content

Light and simple JavaScript form validation library with support of native HTML5 validation attributes and input types

License

Notifications You must be signed in to change notification settings

AmraniCh/form-validate-js

Repository files navigation

Form Validate JS

Light and simple JavaScript form validation library with support of native HTML5 validation attributes and input types.

Simple usage example

FormValidator('#myForm', {
    events: ['submit', 'input'],
    constraints: {
        // specifies constraints for form fileds
        username: {
            required: true,
            match: 'username',
            maxlength: 30,
        },
        password: {
            required: true,
            match: /^[a-zA-Z0-9]*$/,
            maxlength: function() {
                // some logic
                return 30,
            },
            messages: {
                match: 'Accept only characters and numbers.',
            },
        },
        confirm_password: {
            required: true,
            equal: '#password',
        },
    },
    // optional
    submitHandler: function () {
        // handle manuallly the submitting of the form
    },
    // optional
    invalidHandler: function () {
        // get the form errors
        console.log(this.errors);
    },
});

Supported settings and their default values

Name description optional default value
events specifies the validation events in an array ✔️ ['submit']
lang specifies the error messages display language ✔️ en
showErrors whether to show error messages or not ✔️ true

Supported constraint types

Name description Type
required requiring the field Boolean|Function
match The field value must match a regex, the value of this constraint can be either one of the regular expression defined by the library or a custom regex pattern String|RegExp|Function
maxlength The field value cannot be greater than the giving value Number|Function
equal The field value must be the same to other field value String

note : All the constraint types can accept a function value that must return the value needed for the constraint type.

Example :

FormValidator('#myForm', {
    constraints: {
        username: {
            maxlength: function () {
                // logic
                return length;
            },
        },
    },
});

Supported regular expressions for the 'match' constraint type

✔️ username
✔️ email
✔️ number

Supported languages for error messages

✔️ English
✔️ French

Error messages

You can specify and customize the error messages with the messages object, and this is two ways to do that.

Specify your own message

username: {
    maxlength: 30,
    messages: {
        maxlength: "username length cannot be greater than {0} characters."
    }
}

Altering the default message

username: {
    required: true,
    messages: {
        required: function(msg) {
                return "Error : " + msg;
        }
    }
}

Override the default error messages

var validate = FormValidator('#myForm');

validate.defaults.messages.en = {
    custom: 'not match the regex pattern [{0}].',
    email: '{0} is not a valid email address.',
    username: '{0} is not valid username.',
    number: '{0} is not valid number.',
    required: 'required.',
    maxlength: 'maximaux characters length is {0}.',
    equal: 'not the same value.',
};

/**
 * Because the error messages sets when calling the FormValidator function 
 * constructor we need to rebuild the constraints object to apply
 * the error messages tha we've just override above
 */
validate.buildConstraints();

About

Light and simple JavaScript form validation library with support of native HTML5 validation attributes and input types

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published