Validation Rules EmailRule

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

Type: Object

Show Example:
AngularJS
Knockout
jQuery

In this example, the 'email' rule is applied to the 'Email' editor. This rule demands that the editor value match the Email pattern. To check this rule, specify a wrong email.

<div style="height:200px;max-width:200px;margin:0px auto" ng-controller="demoController">
    <div dx-text-box="{ bindingOptions: {value: 'email'},  mode: 'email', placeholder: 'Email' }" 
        dx-validator="{ validationRules: [
            { type: 'required', message: 'Email is required' },
            { type: 'email' }
        ] }">        
    </div>
    <div dx-text-box="{ bindingOptions: {value: 'password'}, mode: 'password', placeholder: 'Password' }" 
        dx-validator="{ validationRules: [ { type: 'required', message: 'Password can not be empty.' } ] }">        
    </div>
	<div dx-validation-summary="{ }"></div>
	<div dx-button="{ text: 'Register', onClick: validateAndLogin }"></div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.email = "";
    $scope.password = "";
    $scope.validateAndLogin = function (params) {
        var result = params.validationGroup.validate();
        if (result.isValid) {
            DevExpress.ui.notify({
                message: "You are logged in by the '" + $scope.email + "' email.",
                position: {
                    my: "left top",
                    at: "left top",
                }
            }, "Success", 3000);
        }
    }
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});

In this example, the 'email' rule is applied to the 'Email' editor. This rule demands that the editor value match the Email pattern. To check this rule, specify a wrong email.

<div style="height:200px;max-width:200px;margin:0px auto">
	<div data-bind="dxTextBox: { value: email, mode: 'email', placeholder: 'Email' },
		dxValidator: { validationRules: [
            { type: 'required', message: 'Email is required' },
            { type: 'email' }
        ] }">	   
	</div>		
	<div data-bind="dxTextBox: { value: password, mode: 'password', placeholder: 'Password' },
		dxValidator: {  validationRules: [{ type: 'required', message: 'Password can not be empty.' }] }">
	</div>
	<div data-bind="dxValidationSummary: { }"></div>
	<div data-bind="dxButton: { text: 'Register', onClick: validateAndLogin }"></div>
</div>
var myViewModel = {
    email: ko.observable(""),
    password: ko.observable(""),
    validateAndLogin: function (params) {
        var result = params.validationGroup.validate();
        if (result.isValid) {
            DevExpress.ui.notify({
                message: "You are logged in by the '" + this.email() + "' email.",
                position: {
                    my: "left top",
                    at: "left top",
                }
            }, "Success", 3000);
        }
    },
}
ko.applyBindings(myViewModel);

In this example, the 'email' rule is applied to the 'Email' editor. This rule demands that the editor value match the Email pattern. To check this rule, specify a wrong email.

<div style="height:200px;max-width:200px;margin:0px auto">
    <div id="email"></div>
    <div id="password"></div>
    <div id="summary"></div>
    <div id="button"></div>
</div>
$(function () {
    $("#email").dxTextBox({
        value: null, mode: 'email', placeholder: 'Email'
    }).dxValidator({
        validationRules: [
            { type: 'required', message: 'Email is required' },
            { type: 'email' }
        ]
    });
    $("#password").dxTextBox({
        value: null, mode: 'password', placeholder: 'Password'
    }).dxValidator({
        validationRules: [ { type: 'required', message: 'Password can not be empty.' } ]
    });
    $("#summary").dxValidationSummary({});
    $("#button").dxButton({
        text: 'Register',
        onClick: function (params) {
            var result = params.validationGroup.validate();
            if (result.isValid) {
                var email = $("#email").dxTextBox('instance').option('value');
                DevExpress.ui.notify({
                    message: "You are logged in by the '" + email + "' email.",
                    position: {
                        my: "left top",
                        at: "left top",
                    }
                }, "Success", 3000);
            }
        }
    });
});

message

Specifies the message that is shown for end-users if the current rule is broken.

Type: String
Default Value: 'Email is invalid'

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.

type

Specifies the type of the current rule.

Type: String
Accepted Values: 'email'

Set this field to 'email' to define a rule that will be broken if the validated value does not match the Email pattern.