Baze Validation - Basic form validation

Demo

Other examples

Form with checkbox

Features

Validate empty fields (including black space)
Validate email format (RFC822 specification)
Validate numeric value with optional minimum and maximum value
Accessibility enhancement

Install

You can get a fresh copy of Baze Validation via Bower.

bower install baze-validation --save

Or you can download it directly from the repository.

Dependencies

Baze Validation depends on 2 libraries:

jQuery
sprintf by Alexei

So make sure to include those 2 libraries before Baze Validation

<script src="jquery.js"></script>
<script src="sprintf.js"></script>
<script src="baze.validation.js"></script>

How to use

Given the markup

<form>
    <label for="input1">Username</label>
    <input id="input1" type="text" required>

    <label for="input2">Email</label>
    <input id="input2" type="email" required>

    <label for="input3">Age</label>
    <input id="input3" type="number" required>
</form>

For quick initialization using default options

$('form').bazeValidate();

Or you can pass options to suit your needs

$('form').bazeValidate({
    classInvalid    : 'form-input--error',
    classValid      : 'form-input--success',
    classMsg        : 'form-msg-error',
    msgEmpty        : 'This field is required.',
    msgEmail        : 'Invalid email address.',
    msgNumber       : 'Input must be number.',
    msgExceedMin    : 'Minimum number is %s.',
    msgExceedMax    : 'Maximum number is %s.',
    onValidated     : function (e) {
        // scary code
    }
});

Options

classInvalid: Type: String; Default: input-invalid; Description: Class to be added to invalid input
classValid: Type: String; Default: input-valid; Description: Class to be added to valid input
classMsg: Type: String; Default: msg-error; Description: Class to be added to form error message
msgEmpty: Type: String; Default: This field is required.; Description: Text to display if input is empty
msgEmail: Type: String; Default: Invalid email address.; Description: Text to display for invalid email address
msgNumber: Type: String; Default: Input must be number.; Description: Text to display if input value is not numeric
msgExceedMin: Type: String; Default: Minimum number is %s.; Description: Text to display if input type number's value is less than minimum value specified by min attribute. %s is a placeholder to display the minimum value, so you can place it anywhere or even remove it.
msgExceedMax: Type: String; Default: Maximum number is %s.; Description: Text to display if input type number's value is greater than maximum value specified by max attribute. %s is a placeholder to display the maximum value, so you can place it anywhere or even remove it.
onValidated(Event Object): Type: Function; Default: null; Description: a callback function that fired once the form validated.

Destroy

In case you need to destroy Baze Validation instance

$('form').trigger('bazevalidate.destroy');

How it works

Attribute novalidate will be added to <form> element to prevent browser's default form validation.
Baze Validation will validate all elements inside <form> that has required attribute and is not disabled. Elements without required attribute (optional field) will be ignored.
If a field fail the validation, Baze Validation will add input-invalid class (customizable) and an error message with class msg-error (customizable) will be added after the element.
If pass, Baze Validation will add input-valid class to the input.
Baze Validation with fire onValidated callback function when all validation pass if any.

Styling

Baze Validation doesn't offer any default styling if a field is valid or invalid, so the presentation is fully in your control.

Browsers support

IE8+
Chrome 14+
Firefox 10+
Safari 5+
Opera 11.1
iOS 5.1+
Android 2.2+

Demo §

Other examples

Features §

Install §