JavaScript/jQuery Validator - CustomRule

To specify the custom rule, set the type to "custom" and declare the validationCallback function.

You can also set a custom message, specify whether empty values are valid, and whether the rule should be re-evaluated, even if the target value is the same.

See Also

• Data Validation

An error message can be specified as follows:

• Hard-code the message

  jQuery

  index.js

  $(function() {
      $("#textBox").dxTextBox({ ... })
          .dxValidator({
              type: "custom",
              message: "My custom message"
          });
  });

  Angular

  app.component.html

  app.module.ts

  <dx-text-box> 
      <dx-validator>
          <dxi-validation-rule 
              type="custom" 
              message="My custom message">
          </dxi-validation-rule>
      </dx-validator>
  </dx-text-box>

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  
  import { DxValidatorModule,
           DxTextBoxModule } from 'devextreme-angular';
  
  @NgModule({
      declarations: [
          AppComponent
      ],
      imports: [
          DxTextBoxModule,
          BrowserModule,
          DxValidatorModule
      ],
      providers: [],
      bootstrap: [AppComponent]
  })
  export class AppModule { }

  Vue

  App.vue

  <template>
      <DxTextBox>
          <DxValidator>
              <DxCustomRule
                  message="My custom message"
              />
          </DxValidator>
      </DxTextBox>
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import { DxTextBox } from 'devextreme-vue/text-box';
  import {
      DxValidator,
      DxCustomRule
  } from 'devextreme-vue/validator';
  
  export default {
      components: {
          DxTextBox,
          DxValidator,
          DxCustomRule
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import { TextBox } from 'devextreme-react/text-box';
  import {
      Validator,
      CustomRule
  } from 'devextreme-react/validator';
  
  class App extends React.Component {
      render() {
          return (
              <TextBox>
                  <Validator>
                      <CustomRule
                          message="My custom message" />
                  </Validator>
              </TextBox>
          );
      }
  }
  export default App;

• Hide the message

  jQuery

  index.js

  $(function() {
      $("#textBox").dxTextBox({ ... })
          .dxValidator({
              type: "custom",
              message: ""
          });
  });

  Angular

  app.component.html

  app.module.ts

  <dx-text-box>
      <dx-validator>
          <dxi-validation-rule 
              type="custom" 
              message="">
          </dxi-validation-rule>
      </dx-validator>
  </dx-text-box>

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  
   import { DxValidatorModule,
            DxTextBoxModule } from 'devextreme-angular';
  
  @NgModule({
      declarations: [
          AppComponent
      ],
      imports: [
          BrowserModule,
          DxValidatorModule,
          DxTextBoxModule
      ],
      providers: [],
      bootstrap: [AppComponent]
  })
  export class AppModule { }

  Vue

  App.vue

  <template>
      <DxTextBox>
          <DxValidator>
              <DxCustomRule
                  message=""
              />
          </DxValidator>
      </DxTextBox>
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import { DxTextBox } from 'devextreme-vue/text-box';
  import {
      DxValidator,
      DxCustomRule
  } from 'devextreme-vue/validator';
  
  export default {
      components: {
          DxTextBox,
          DxValidator,
          DxCustomRule
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import { TextBox } from 'devextreme-react/text-box';
  import {
      Validator,
      CustomRule
  } from 'devextreme-react/validator';
  
  class App extends React.Component {
      render() {
          return (
              <TextBox>
                  <Validator>
                      <CustomRule
                          message="" />
                  </Validator>
              </TextBox>
          );
      }
  }
  export default App;

• Display the editor's name in the message

  jQuery

  index.js

  $(function() {
      $("#textBox").dxTextBox({ ... })
          .dxValidator({
              name: "Password", // The error message will be "Password is invalid"
              validationRules: [{
                  type: "custom"
              }]
          });
  });

  Angular

  app.component.html

  app.module.ts

  <dx-text-box>
      <!-- The error message will be "Password is invalid" -->
      <dx-validator name="Password">
          <dxi-validation-rule 
              type="custom">
          </dxi-validation-rule>
      </dx-validator>
  </dx-text-box>

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  
  import { DxValidatorModule,
           DxTextBoxModule } from 'devextreme-angular';
  
  @NgModule({
      declarations: [
          AppComponent
      ],
      imports: [
          BrowserModule,
          DxValidatorModule,
          DxTextBoxModule
      ],
      providers: [],
      bootstrap: [AppComponent]
  })
  export class AppModule { }

  Vue

  App.vue

  <template>
      <DxTextBox>
          <!-- The error message will be "Password is invalid" -->
          <DxValidator name="Password">
              <DxCustomRule />
          </DxValidator>
      </DxTextBox>
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import { DxTextBox } from 'devextreme-vue/text-box';
  import {
      DxValidator,
      DxCustomRule
  } from 'devextreme-vue/validator';
  
  export default {
      components: {
          DxValidator,
          DxCustomRule
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import { TextBox } from 'devextreme-react/text-box';
  import {
      Validator,
      CustomRule
  } from 'devextreme-react/validator';
  
  class App extends React.Component {
      render() {
          return (
              <TextBox>
                  {/* The error message will be "Password is invalid" */}
                  <Validator name="Password">
                      <CustomRule} />
                  </Validator>
              </TextBox>
          );
      }
  }
  
  export default App;

The following code shows a validationCallback example. The function accepts a number and returns true if the number is even and false if it is odd:

$(function () {
    $("#numberBoxContainer").dxNumberBox({
        value: 4
    }).dxValidator({
        validationRules: [{
            type: "custom",
            validationCallback: validateNumber,
            message: "An even number is expected"
        }]
    });
});
function validateNumber (e) {
    return e.value % 2 == 0;
}

<dx-number-box [value]="4">
    <dx-validator>
        <dxi-validation-rule type="custom" 
            [validationCallback]="validateNumber" 
            message="An even 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,
        // ...
    ],
    // ...
})

<template>
    <DxNumberBox :value="4">
        <DxValidator>
            <DxCustomRule
                :validation-callback="validateNumber"
                message="An even 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>

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={4}>
                <Validator>
                    <CustomRule
                        validationCallback={this.validateNumber}
                        message="An even number is expected"
                    />
                </Validator>
            </NumberBox>
        );
    }
}
export default App;