If you have technical questions, please create a support ticket in the DevExpress Support Center.
DevExtreme.MVC.Demos.ViewModels.EditorsViewModel
Html.BeginForm()) { (
using(Html.DevExtreme().ValidationGroup()) {
AntiForgeryToken() .
<div class="dx-fieldset">
<div class="dx-fieldset-header">Credentials</div>
<div class="dx-field">
<div class="dx-field-label">
LabelFor(m => m.Email) .
</div>
<div class="dx-field-value">
DevExtreme().TextBoxFor(m => m.Email) .
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">
LabelFor(m => m.Password) .
</div>
<div class="dx-field-value">
Html.DevExtreme().TextBoxFor(m => m.Password) (
.Mode(TextBoxMode.Password)
.ID("Password")
.OnValueChanged("onPasswordChanged")
.Buttons(buttons =>
{
buttons.Add()
.Name("password")
.Location(TextEditorButtonLocation.After)
.Widget(w => w.Button()
.StylingMode(ButtonStylingMode.Text)
.Icon("eyeopen")
.OnClick("() => changePasswordMode('Password')"));
})
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">
LabelFor(m => m.ConfirmPassword, "Confirm Password") .
</div>
<div class="dx-field-value">
Html.DevExtreme().TextBoxFor(m => m.ConfirmPassword) (
.Mode(TextBoxMode.Password)
.ID("ConfirmPassword")
.Buttons(buttons =>
{
buttons.Add()
.Name("password")
.Location(TextEditorButtonLocation.After)
.Widget(w => w.Button()
.StylingMode(ButtonStylingMode.Text)
.Icon("eyeopen")
.OnClick("() => changePasswordMode('ConfirmPassword')"));
})
)
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header">Personal Data</div>
<div class="dx-field">
<div class="dx-field-label">
LabelFor(m => m.Name) .
</div>
<div class="dx-field-value">
DevExtreme().TextBoxFor(m => m.Name) .
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">
LabelFor(m => m.Date, "Date of birth") .
</div>
<div class="dx-field-value">
Html.DevExtreme().DateBoxFor(m => m.Date) (
.InvalidDateMessage("The date must have the following format: MM/dd/yyyy")
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">
LabelFor(m => m.VacationDates, "Vacation Dates") .
</div>
<div class="dx-field-value">
Html.DevExtreme().DateRangeBoxFor(m => m.VacationDates) (
.ID("DateRangeBox")
.OnValueChanged("onVacationDatesChange")
)
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header">Billing address</div>
<div class="dx-field">
<div class="dx-field-label">
LabelFor(m => m.Country) .
</div>
<div class="dx-field-value">
Html.DevExtreme().SelectBoxFor(m => m.Country) (
.DataSource(d => d.WebApi().RouteName("GeoNames").LoadAction("Countries").Key("this"))
.ValidationMessagePosition(Position.Left)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">
LabelFor(m => m.City) .
</div>
<div class="dx-field-value">
Html.DevExtreme().TextBoxFor(m => m.City) (
.ValidationMessagePosition(Position.Left)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">
LabelFor(m => m.Address) .
</div>
<div class="dx-field-value">
Html.DevExtreme().TextBoxFor(m => m.Address) (
.ValidationMessagePosition(Position.Left)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">
LabelFor(m => m.Phone) <i>(optional)</i> .
</div>
<div class="dx-field-value">
Html.DevExtreme().TextBoxFor(m => m.Phone) (
.Mask("+1 (X00) 000-0000")
.MaskRules(new { X = new JS("/[02-9]/") })
.MaskInvalidMessage("The phone must have a correct USA phone format")
.ValidationMessagePosition(Position.Left)
)
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">
Html.DevExtreme().CheckBoxFor(m => m.Accepted) (
.ID("check")
.Text("I agree to the Terms and Conditions")
.ValidationMessagePosition(Position.Right)
)
</div>
<div class="dx-field-value">
Html.DevExtreme().Button() (
.Width("120px")
.Text("Register")
.Type(ButtonType.Default)
.UseSubmitBehavior(true)
)
</div>
</div>
Html.DevExtreme().ValidationSummary() (
.ID("summary")
)
</div>
}
}
<script>
function changePasswordMode(name) {
let editor = $(`#${name}`).dxTextBox("instance");
editor.option('mode', editor.option('mode') === 'text' ? 'password' : 'text');
}
function onPasswordChanged(e) {
let editor = $("#ConfirmPassword").dxTextBox("instance");
if(editor.option("value")) {
editor.element().dxValidator("validate")
}
}
function onVacationDatesChange(e) {
const editor = $("#DateRangeBox").dxDateRangeBox("instance");
const [startDate, endDate] = editor.option("value");
let isValid;
if (startDate === null && endDate === null) {
isValid = true;
} else {
isValid = startDate !== null && endDate !== null;
}
if (!isValid) {
editor.option({
validationStatus: "invalid",
validationErrors: [{ message: "Both start and end dates must be selected" }]
});
}
}
</script>
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
To enable data validation for an editor, you need to declare the Validator component and implement validation rules. You can attach multiple validation rules to one component. The following list contains all available validation rule types:
-
required
A validation rule that requires the validated field to have a value. -
email
A validation rule that requires the validated field to match the Email pattern. -
async
A custom validation rule used for server-side validation. Implement the validationCallback function to validate the target value. -
compare
A validation rule that requires the validated editor's value to equal the value of the specified expression. To apply this rule, implement the comparisonTarget function to specify the value against which this component compares the validated value. -
pattern
A validation rule that requires the validated field to match a specified pattern. -
stringLength
A validation rule that requires the target value length to fall within the range of the specified minimum and maximum values. This property only accepts string values. -
range
A validation rule that requires the target value length to fall within the range of the specified minimum and maximum values. This property only accepts date-time and numeric values. -
numeric
A validation rule that requires the validated field to have a numeric value. -
custom
A rule with custom validation logic. Implement the validationCallback function to validate the target value.
All validation rule types allow you to specify an error message for a component. You can also specify the message position for each editor. If your application implements a validation group, you can use a validation summary to display all validation errors in one place. In this demo, click the Register button to see a validation summary.
The Register button's useSubmitBehavior property is enabled. As a result, a click on the button validates and submits the HTML form. In your application, you can also implement the button's onClick event handler and use the validate() or validateGroup() method to validate a group of editors.