Validate a Group of Editors

If several editors should be validated together, combine them into a validation group. Use the following syntax to declare it. Enclose a Button that will validate this group.

Razor C#

Razor VB

@model ApplicationName.Models.Person

using (Html.DevExtreme().ValidationGroup()) {
    @(Html.DevExtreme().TextBoxFor(model => model.FirstName))
    @(Html.DevExtreme().TextBoxFor(model => model.LastName))

    @(Html.DevExtreme().Button()
        .Text("Validate")
        .OnClick("validate")
    )
}

<script>
    function validate (params) {
        params.validationGroup.validate();
    }
</script>

@ModelType ApplicationName.Models.Person

@Using (Html.DevExtreme().ValidationGroup())
    @(Html.DevExtreme().TextBoxFor(Function(model) model.FirstName))
    @(Html.DevExtreme().TextBoxFor(Function(model) model.LastName))

    @(Html.DevExtreme().Button() _
        .Text("Validate") _
        .OnClick("validate")
    )
End Using

<script>
    function validate (params) {
        params.validationGroup.validate();
    }
</script>

If the Button should lie outside the group that it validates, bind the Button to the group explicitly using the ValidationGroup method. Note that in this case, the validation group should be given a name.

Razor C#

Razor VB

@model ApplicationName.Models.Person

using (Html.DevExtreme().ValidationGroup("groupName")) {
    @(Html.DevExtreme().TextBoxFor(model => model.FirstName))
    @(Html.DevExtreme().TextBoxFor(model => model.LastName))
}

@(Html.DevExtreme().Button()
    .Text("Validate")
    .ValidationGroup("groupName")
    .OnClick("validate")
)

<script>
    function validate (params) {
        params.validationGroup.validate();
    }
</script>

@ModelType ApplicationName.Models.Person

@Using (Html.DevExtreme().ValidationGroup("groupName"))
    @(Html.DevExtreme().TextBoxFor(Function(model) model.FirstName))
    @(Html.DevExtreme().TextBoxFor(Function(model) model.LastName))
End Using

@(Html.DevExtreme().Button() _
    .Text("Validate") _
    .ValidationGroup("groupName") _
    .OnClick("validate")
)

<script>
    function validate (params) {
        params.validationGroup.validate();
    }
</script>

Those editors whose validation group is not specified explicitly are collected in a default validation group. To validate this group, the Button should not be included in any validation group and should not have the ValidationGroup specified.

Razor C#

Razor VB

@model ApplicationName.Models.Person

@(Html.DevExtreme().TextBoxFor(model => model.FirstName))
@(Html.DevExtreme().TextBoxFor(model => model.LastName))

@(Html.DevExtreme().Button()
    .Text("Validate")
    .OnClick("validate")
)

<script>
    function validate (params) {
        params.validationGroup.validate();
    }
</script>

@ModelType ApplicationName.Models.Person

@(Html.DevExtreme().TextBoxFor(Function(model) model.FirstName))
@(Html.DevExtreme().TextBoxFor(Function(model) model.LastName))

@(Html.DevExtreme().Button() _
    .Text("Validate") _
    .OnClick("validate")
)

<script>
    function validate (params) {
        params.validationGroup.validate();
    }
</script>

NOTE

Frequently, a collection of editors should be submitted after being validated. The DevExtreme Button control supports this scenario out of the box. See the Validate and Submit an HTML Form topic for details.

Each editor displays validation errors relevant only to it. If you need all errors relevant to a validation group to be displayed in one place, add a ValidationSummary to your page.

Razor C#

Razor VB

using (Html.DevExtreme().ValidationGroup()) {
    // ...
    // Displays validation errors relevant to the group it is nested in
    @(Html.DevExtreme().ValidationSummary())
}

@Using (Html.DevExtreme().ValidationGroup())
    ' ...
    ' Displays validation errors relevant to the group it is nested in
    @(Html.DevExtreme().ValidationSummary())
End Using

Razor C#

Razor VB

using (Html.DevExtreme().ValidationGroup("groupName")) {
    // ...
}

@(Html.DevExtreme().ValidationSummary()
    // Displays validation errors relevant to the "groupName" group
    .ValidationGroup("groupName")
)

@Using (Html.DevExtreme().ValidationGroup("groupName"))
    ' ...
End Using

@* Displays validation errors relevant to the "groupName" group *@
@(Html.DevExtreme().ValidationSummary() _
    .ValidationGroup("groupName")
)

Razor C#

Razor VB

// Displays validation errors relevant to the default group
@(Html.DevExtreme().ValidationSummary())

@* Displays validation errors relevant to the default group *@
@(Html.DevExtreme().ValidationSummary())

View Demo

Validate a Group of Editors

See Also