JavaScript/jQuery Validator Options
An object defining configuration options for the Validator widget.
adapter
An object that specifies what and when to validate, and how to apply the validation result.
This option should be specified when you cannot associate the Validator widget with an editor, for instance, when you use custom editors or a validated value is a sequence of several DevExtreme editor values. Refer to the Validate a Custom Value topic for more details.
See Also
elementAttr
Specifies the attributes to be attached to the widget's root element.
jQuery
$(function(){ $("#validatorContainer").dxValidator({ // ... elementAttr: { id: "elementId", class: "class-name" } }); });
Angular
<dx-validator ... [elementAttr]="{ id: 'elementId', class: 'class-name' }"> </dx-validator>
import { DxValidatorModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxValidatorModule ], // ... })
ASP.NET MVC Control
@(Html.DevExtreme().Validator() .ElementAttr("class", "class-name") // ===== or ===== .ElementAttr(new { @id = "elementId", @class = "class-name" }) // ===== or ===== .ElementAttr(new Dictionary<string, object>() { { "id", "elementId" }, { "class", "class-name" } }) )
@(Html.DevExtreme().Validator() _ .ElementAttr("class", "class-name") ' ===== or ===== .ElementAttr(New With { .id = "elementId", .class = "class-name" }) ' ===== or ===== .ElementAttr(New Dictionary(Of String, Object) From { { "id", "elementId" }, { "class", "class-name" } }) )
height
Specifies the widget's height.
This option accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px"
,"80%"
,"auto"
,"inherit"
.Function
A function returning either of the above. For example:JavaScriptheight: function() { return window.innerHeight / 1.5; }
name
Specifies the editor name to be used in the validation default messages.
All predefined rules have a default message displayed when the rules are not satisfied by the validated editor values. If you specify the name option of the associated dxValidator object, the option value will be used as an object in the default message. For instance, the "Value is invalid" message will be transformed to "Login is invalid", if you set "Login" for the name option.
onDisposing
A function that is executed before the widget is disposed of.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
onInitialized
A function that is executed only once, after the widget is initialized.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
You cannot access widget elements in this function because it is executed before they are ready.
onOptionChanged
A function that is executed after a widget option is changed.
Information about the event.
Name | Type | Description |
---|---|---|
name |
The option's short name. |
|
model |
The model data. Available only if you use Knockout. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
fullName |
The option's full name. |
|
value | any |
The option's new value. |
onValidated
A function that is executed after a value is validated.
Information about the event.
Name | Type | Description |
---|---|---|
name |
The value of the name option. |
|
isValid |
Indicates whether all the rules checked for the value are satisfied. |
|
value |
The validated value. |
|
validationRules | Array<RequiredRule | NumericRule | RangeRule | StringLengthRule | CustomRule | CompareRule | PatternRule | EmailRule> |
An array of validation rules specified for the current dxValidator object. |
brokenRule | | | | | | | | |
The object representing the first broken rule on the list of specified validation rules. |
validationGroup
Specifies the validation group the editor will be related to.
Generally, the editors that are associated with dxValidator objects are validated on each value change. But you can combine several editors into a group so that they are validated together (e.g., on a button click). In the Knockout or AngularJS approach, editors should be added to the div element representing the ValidationGroup component. In this instance, you do not have to specify the validationGroup option for the associated dxValidator objects.
If you use the JQuery approach, the validationGroup option should be specified for the associated dxValidator object to indicate the validation group within which the editor will be validated. Assign the same validation group name for those editors that should be validated together.
See Also
validationRules
An array of validation rules to be checked for the editor with which the dxValidator object is associated.
Array<RequiredRule | NumericRule | RangeRule | StringLengthRule | CustomRule | CompareRule | PatternRule | EmailRule>
There are several predefined rule types. Each rule type demands a specific set of rule options. Use the Validation Rules section to learn how to define rules of different types.
width
Specifies the widget's width.
This option accepts a value of one of the following types:
Number
The width in pixels.String
A CSS-accepted measurement of width. For example,"55px"
,"80%"
,"auto"
,"inherit"
.Function
A function returning either of the above. For example:JavaScriptwidth: function() { return window.innerWidth / 1.5; }
If you have technical questions, please create a support ticket in the DevExpress Support Center.