CEValidator

HTML Cross-browser form validator

Examples:

https://caioedut.github.io/cevalidator/docs

How to use

Automatic validation

<form id="myForm" class="validate">
    <input type="text" data-validate="required" />
</form>

In JavaScript validation

<form id="myForm">
    <input type="text" data-validate="required" />
</form>

$(document).ready(function() {
    $('#myForm').on('submit', function(e) {
        e.preventDefault();
        
        if ($(this).validate()) {
            // DO SOMETHING IF FORM VALIDATE RETURNS TRUE
        } else {
            // DO SOMETHING IF FORM VALIDATE RETURNS FALSE
        }
    });
});

Tooltips and error messages

Tooltip

You can ADD a tooltip error using the class validate-tooltip in form tag. All default validator have a default message.

<form id="myForm" class="validate validate-tooltip">
    <input type="text" data-validate="required" />
</form>

Custom errors messages

You can customize your tooltip error message adding a data-message in your input.

<form id="myForm" class="validate validate-tooltip">
    <input type="text" data-validate="required" data-message="Please, type this field."/>
</form>

Validation Rules

List of default validation rules

You can use a pre formatted validation rule, using the data-validate="ruleName"

Rules:

• required
• checkbox (for input type="checkbox" with data-validate="required")
• radio (for input type="radio" with data-validate="required")
• minlength
• email
• datetime (default: dd/mm/yyyy hh:ii:ss)
• date (default: dd/mm/yyyy)
• time
• cpf
• cnpj
• phone (numeric with 10~11 digits)
• numeric (numeric including zero)
• cep (numeric with 8 digits)
• url
• decimal (float values)
• match (matches with other input name in the same form, eg.: data-validate="match('password1')" )
• regex (a custom regex, eg.: data-validate="\d{3,5}" )

Custom validation rule

You can create your custom validation rule with a default message, like

cevalidator.addRule("myNewRule", function(inputElem) {
    // DO SOMETHING
    return true; // OR FALSE
}, "This field is required.");

<form id="myForm" class="validate validate-tooltip">
    <input type="text" data-validate="myNewRule" />
</form>

Custom Success/Error actions

You can create custom functions to run when trigger success or error.

cevalidator.onSuccess = function (inputElem) {
    inputElem.removeClass('error').addClass('success');
};
cevalidator.onError = function (inputElem) {
    inputElem.removeClass('success').addClass('error');
};