jQuery EasyUI Form Plugin - Validatebox Validation Box

Override the default defaults with $.fn.validatebox.defaults.

The validatebox is designed to validate form input fields. If the user enters an invalid value, it will change the background color, display a warning icon, and a prompt message. The validatebox can be integrated with the form plugin to prevent submission of invalid fields.

Dependencies

• tooltip

Usage

Create a validatebox from markup.

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">

Create a validatebox using JavaScript.

<input id="vv">

$('#vv').validatebox({
    required: true,
    validType: 'email'
});

Check if the password and re-entered password are the same.

// extend the 'equals' rule
$.extend($.fn.validatebox.defaults.rules, {
    equals: {
        validator: function(value,param){
            return value == $(param[0]).val();
        },
        message: 'Fields do not match.'
    }
});

<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
    required="required" validType="equals['#pwd']">

Validation Rules

Validation rules are defined using the required and validType attributes. Here are the implemented rules:

• email: Matches the email regex rule.
• url: Matches the URL regex rule.
• length[0,100]: Allows characters from x to y.
• remote['http://.../action.do','paramName']: Sends an ajax request to validate the value, returns 'true' on success.

To customize validation rules, override $.fn.validatebox.defaults.rules to define a validation function and an invalid message. For example, define a minLength validation type:

$.extend($.fn.validatebox.defaults.rules, {
    minLength: {
        validator: function(value, param){
            return value.length >= param[0];
        },
        message: 'Please enter at least {0} characters.'
    }
});

Now you can use this minLength validation type to define an input box that requires at least 5 characters:

<input class="easyui-validatebox" data-options="validType:'minLength[5]'">

Properties

Methods