jQuery EasyUI ValidateBox

ValidateBox

Override defaults with $.fn.validatebox.defaults.

The validatebox is designed to validate the form input fields. If users enter invalid values, it will change the background color, display the alarm icon and a tooltip message. The validatebox can be integrated with form plugin and will prevent invalid fields from submission.

Dependencies

• tooltip

Usage

Create validatebox from markup.

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

Create validatebox using javascript.

1. <input id="vv">

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

To check password and retype password are same.

1. // extend the 'equals' rule
2. $.extend($.fn.validatebox.defaults.rules, {
3. equals: {
4. validator: function(value,param){
5. return value == $(param[0]).val();
6. },
7. message: 'Field do not match.'
8. }
9. });

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

Validate Rule

The validate rule is defined by using required and validType property, here are the rules already implemented:

• email: Match email regex rule.
• url: Match URL regex rule.
• length[0,100]: Between x and x characters allowed.
• remote['http://.../action.do','paramName']: Send ajax request to do validate value, return 'true' when successfully.

To custom validate rule, override $.fn.validatebox.defaults.rules that defines a validator function and invalid message. For example, to define a minLength valid type:

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

Now you can use the minLength validtype to define an input box that should be inputed at least 5 characters:

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

Properties

<input class="easyui-validatebox" data-options="required:true,validType:'url'">
<input class="easyui-validatebox" data-options="
	required:true,
	validType:['email','length[0,20]']
">
<input class="easyui-validatebox" data-options="
	required:true,
	validType:{
		length:[10,30],
		remote:['http://.../action.do','paramName']
	}
">

Events

Methods