Conditional Form Validation

[Sean]

Hello,

I'm looking to see if its possible to have the validation on one item in a form be dependent on another inputs selection.

.
.
.
        @(Html.Kendo().Form<EquipmentViewModel>()
            .Name("EquipmentForm")
            .Layout("grid")
            .Items(items =>
            {
                items.AddGroup()
                    .Label("Registration Form")
                    .Items(i =>
                    {
                        i.Add()
                            .Field(f => f.EquipmentType)
                            .Label(l => l.Text("Equipment Type"))
                            .Editor(e =>
                            {
                                e.DropDownList()
                                    .DataTextField("ShortName")
                                    .DataValueField("EquipmentTypeID")
                                    .OptionLabel("Select")
                                    .DataSource(source =>
                                    {
                                        source
                                            .ServerFiltering(true)
                                            .Read(read => { read.Url("/Equipment/Index?handler=EquipmentTypesByEquipmentClassID").Data("EquipmentClassData"); });
                                    })
                                    .Enable(isControlEnabled)
                                    .Events(e => { e.Change("OnChangeEquipmentTypeChange").DataBound("OnChangeEquipmentTypeChange"); })
                                    .CascadeFrom("EquipmentClass");
                            });
                        i.Add()
                            .Field(f => f.EquipmentDesign)
                            .Label(l => l.Text("Equipment Design"))
                            .Editor(e =>
                            {
                                e.DropDownList()
                                    .DataTextField("ShortName")
                                    .DataValueField("EquipmentDesignID")
                                    .OptionLabel("Select")
                                    .DataSource(source =>
                                    {
                                        source
                                            .ServerFiltering(true)
                                            .Read(read => { read.Url("/Equipment/Index?handler=EquipmentDesignByEquipmentTypeID").Data("EquipmentTypeData"); });
                                    })
                                    .CascadeFrom("EquipmentType")
                                    .Enable(false)
                                    .Events(e => { e.Change("OnChangeEquipmentDesignChange").DataBound("OnChangeEquipmentDesignChange"); });
                            });
.
.
.

This scenario loads EquipmentDesigns based on the EquipmentType the user has selected. I would like EquipmentDesigns to be required ONLY if the selected equipment type has equipment designs. In other words, only when the call to get the EquipmentDesigns actually returns data.

[Mihaela]

Hello Sean,

Since you have submitted the same query as a support ticket, and I have already answered you in the support thread, I will post the same answer here in case someone else has the same question:

You can make the "EquipmentDesign" required if the DropDownList has options as follows:

• Ensure that the "EquipmentDesign" property of Model "EquipmentViewModel" does not have the [Required] DataAnnotation attribute:

    public class EquipmentViewModel
    {
        public int EquipmentType { get; set; }

        public int EquipmentDesign { get; set; }
    }

• Handle the RequestEnd event of the DataSource of the "EquipmentDesign" DropDownList editor and check if the server response contains data. Add the "required" attribute to the input element of the "EquipmentDesign" field with jQuery.

                        i.Add()
                            .Field(f => f.EquipmentDesign)
                            .Label(l => l.Text("Equipment Design"))
                            .Editor(e =>
                            {
                                e.DropDownList()
                                    .DataTextField("ShortName")
                                    .DataValueField("EquipmentDesignID")
                                    .OptionLabel("Select")
                                    .DataSource(source =>
                                    {
                                        source
                                            .ServerFiltering(true)
                                            .Events(ev => ev.RequestEnd("onRequestEnd"))
                                            .Read(read => { read.Url("/Equipment/Index?handler=EquipmentDesignByEquipmentTypeID").Data("EquipmentTypeData"); });
                                    })
                                    .CascadeFrom("EquipmentType")
                                    .Enable(false)
                                    .Events(e => { e.Change("OnChangeEquipmentDesignChange").DataBound("OnChangeEquipmentDesignChange"); });
                            });

<script>
    function onRequestEnd(e) {
        if(e.response.length > 0) { //Check if the server response contains data items
            $("#EquipmentDesign").attr("required", "required"); //add the attribute "required"
        } else {
            $("#EquipmentDesign").removeAttr("required"); //Otherwise, remove the attribute
        }
    }
</script>

As a result, the ""EquipmentDesign" field will be required only when there are available options.

Regards,
Mihaela
Progress Telerik