JavaScript/jQuery Validator - CustomRule
The validation logic should be implemented within the validationCallback function. See this topic for details on using the custom rule for the server-side validation.
ignoreEmptyValue
Specifies whether the validationCallback should be called for null and undefined values.
message
You do not have to specify this field. In this instance, a default message will be shown. To include the name of the validated editor into the default validation message as a subject, set the name field of the dxValidator object.
If you assign an empty string to the message field, the message will not be shown.
reevaluate
Indicates whether the rule should be always checked for the target value or only when the target value changes.
type
Set this field to "custom" to define a rule that will be broken as a result of custom validation performed by the validationCallback function.
validationCallback
| Name | Type | Description |
|---|---|---|
| data |
The current row data. Exists only when you validate a DataGrid or TreeList cell's value. |
|
| rule |
The current rule object that exposes user-defined options, the isValid and message fields, and the rule type-specific fields. |
|
| validator |
The Validator object that initiated the validation. |
|
| value | | |
The validated value. |
In the following code, only odd numbers are considered valid:
jQuery
$(function () {
$("#numberBoxContainer").dxNumberBox({
value: 3
}).dxValidator({
validationRules: [{
type: "custom",
validationCallback: validateNumber,
message: "An odd number is expected"
}]
});
});
function validateNumber (e) {
return e.value % 2 == 0;
}Angular
<dx-number-box [value]="3">
<dx-validator>
<dxi-validation-rule type="custom"
[validationCallback]="validateNumber"
message="An odd number is expected">
</dxi-validation-rule>
</dx-validator>
</dx-number-box>
import { DxNumberBoxModule, DxValidatorModule } from "devextreme-angular";
// ...
export class AppComponent {
validateNumber(e) {
return e.value % 2 == 0;
}
}
@NgModule({
imports: [
DxNumberBoxModule,
DxValidatorModule,
// ...
],
// ...
})Vue
<template>
<DxNumberBox :value="3">
<DxValidator>
<DxCustomRule
:validation-callback="validateNumber"
message="An odd number is expected"
/>
</DxValidator>
</DxNumberBox>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DxNumberBox from 'devextreme-vue/number-box';
import DxValidator, {
DxCustomRule
} from 'devextreme-vue/validator';
export default {
components: {
DxNumberBox,
DxValidator,
DxCustomRule
},
methods: {
validateNumber(e) {
return e.value % 2 == 0;
}
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import NumberBox from 'devextreme-react/number-box';
import Validator, {
CustomRule
} from 'devextreme-react/validator';
class App extends React.Component {
validateNumber(e) {
return e.value % 2 == 0;
}
render() {
return (
<NumberBox defaultValue={3}>
<Validator>
<CustomRule
validationCallback={this.validateNumber}
message="An odd number is expected"
/>
</Validator>
</NumberBox>
);
}
}
export default App;See this topic for a server-side validation example.