React Validator - EmailRule

A validation rule that demands that the validated field match the Email pattern.

import { EmailRule } from "devextreme/common"
Type:

Object

ignoreEmptyValue

If set to true, empty values are valid.

Type:

Boolean

Default Value: true

message

Specifies the message that is shown if the rule is broken.

Type:

String

Default Value: 'Email is invalid'

An error message can be specified as follows:

  • Hard-code the message

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

    App.js
    • import React from 'react';
    •  
    • import 'devextreme/dist/css/dx.light.css';
    •  
    • import { TextBox } from 'devextreme-react/text-box';
    • import {
    • Validator,
    • EmailRule
    • } from 'devextreme-react/validator';
    •  
    • class App extends React.Component {
    • render() {
    • return (
    • <TextBox>
    • <Validator>
    • <EmailRule
    • message="" />
    • </Validator>
    • </TextBox>
    • );
    • }
    • }
    • export default App;
  • Display the editor's name in the message

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

type

Specifies the rule type. Set it to "email" to use the EmailRule.

Type:

String

Accepted Values: 'required' | 'numeric' | 'range' | 'stringLength' | 'custom' | 'compare' | 'pattern' | 'email' | 'async'