YouTipPlugins Form Validatebox
# jQuery EasyUI Form Plugin – Validatebox
* * jQuery EasyUI Plugins](#)
* * *
Override the default values using `$.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 show a tooltip message. The validatebox can be integrated with the form plugin to prevent submitting invalid fields.
!(#)
## Dependencies
* tooltip
## Usage
Create a validatebox from markup.
Create a validatebox using JavaScript.
```javascript
$('#vv').validatebox({
required: true,
validType: 'email'
});
Check if the password and re-entered password are the same.
```javascript
// extend the 'equals' rule
$.extend($.fn.validatebox.defaults.rules, {
equals: {
validator: function(value,param){
return value == $(param).val();
},
message: 'Field do not match.'
}
});
## Validation Rules
Validation rules are defined using the `required` and `validType` attributes. The following rules are implemented:
* `email`: Matches the email regex rule.
* `url`: Matches the URL regex rule.
* `length[0,100]`: Allows from x to y characters.
* `remote['http://.../action.do','paramName']`: Sends an AJAX request to validate the value, returning '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:
```javascript
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param;
},
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:
## Properties
| Name | Type | Description | Default Value |
| :--- | :--- | :--- | :--- |
| name | string | The field name associated with the validatebox. | null |
| required | boolean | Defines if the field is required. | false |
| validType | string | Defines the validation type, which can be a string or an array. | null |
| missingMessage | string | The tooltip message to display when the field is required but empty. | This field is required. |
| invalidMessage | string | The tooltip message to display when the field value is invalid. | null |
| tipPosition | string | The position of the tooltip message, which can be 'left' or 'right'. | right |
| deltaX | number | The horizontal offset of the tooltip message relative to the input box. | 0 |
| delay | number | The delay in milliseconds before re-validating after the last keystroke. | 200 |
| novalidate | boolean | Defines if the validatebox is disabled. | false |
## Events
| Name | Parameters | Description |
| :--- | :--- | :--- |
| onValidate | value | Fires when the field is validated. Return true to indicate the field is valid, false to indicate it is invalid. |
## Methods
| Name | Parameter | Description |
| :--- | :--- | :--- |
| destroy | none | Destroys the validatebox component. |
| validate | none | Validates the input field. Returns true if the field is valid, false otherwise. |
| isValid | none | Checks if the field value is valid. Returns true if valid, false otherwise. |
| enableValidation | none | Enables validation for the validatebox. |
| disableValidation | none | Disables validation for the validatebox. |
| resetValidation | none | Resets the validation state of the validatebox. |
| validatebox | options | Re-initializes the validatebox with the given options. |