Validation for DropDownList

[Bradley]

My apologies if this is the wrong forum for this, but I am having some trouble with a dropdownlist validation

<div class="form-group">
        <label asp-for="RoleModuleId" class="control-label col-md-2">Module</label>
        @(Html.Kendo().DropDownListFor(c => c.RoleModuleId)
              .OptionLabel("-- Select a Module --")
              .HtmlAttributes(new { style = "width:21%", id = "moduleDropdown", required = "required" })
              .BindTo(Model.Modules.OrderBy(c => c.Name))
              .DataTextField("Name")
              .DataValueField("Id"))
    </div>
    <div class="form-group">
        <label asp-for="Name" class="control-label col-md-2">Name</label>
        @(Html.Kendo().TextBox()
            .Name("Name")
            .HtmlAttributes(new { style = "width: 100%", placeholder = "Name of role", required = "required" })
        )
    </div>

With the TextBox if there is nothing selected it will give a little warning message and have the box flash red, and it will prevent the form from submitting. Similarly if nothing is selected for the dropdownlist it will prevent the form from being submitted, but will give no indication. This comes across that there is something wrong with the form, and I believe could cause some confusion.

 

Is this intended behavior or am I missing something?

 

Be well,

Bradley

[Petar]

Hi Bradley,

There is no need to apologize. Based on the provided information, I would assume that the described form is not using Кendo UI Validator, but the standard HTML form validation. In order to validate a DropDownList inside a form, you should use the Validator. You could read more about it here. 

This demo from our documentation shows how to validate different UI for ASP.NET Core components inside a web form. Take a look at it and let me know if you need further assistance in implementing the needed functionality.

Regards,
Petar
Progress Telerik

[Aleks]

If you're using the baked in JQuery unobtrusive validation available with ASP.NET Core and don't want to go to extended lengths implementing some convoluted work-around which means you have to change all of your code (i.e. replacing all of your validation with the Kendo one and probably creating a whole bunch of other problems in the process), you can easily fix this...

JQuery validation doesn't validate hidden fields by default, but you can change behaviour using the following JavaScript:

$.validator.setDefaults({ ignore: null });

 

 

You can also do this for individual fields if you want. (See "ignore" in the docs here: here)

This will enable validation for the hidden input that the DropDownLists uses, and then validation magically works like it's supposed to.

The only remaining issue is that the validation state is only updated after a click somewhere on the page. To get the control to properly trigger validation when the value changes, add something like this:

$(document).ready(function () {
    $("#PropertyName").change(function () {
        var form = $(this).closest("form");
        form.validate().form();
    });
});

 

Then the DropDownList finally behaves like all the other input controls.

[Michael]

Thanks! This worked for me,
all I needed to add was 
$.validator.setDefaults({ ignore: null });

in my $(document).ready(..

I don't mind the need to click out, but if you want to fix it, this code might be a bit more optimal than checking closest and validating entire form:

$(document).ready(function () {
    $("#PropertyName").data("kendoDropDownList").bind("change", function () {
        $(this.element).valid(); // Trigger validation when value changes
    });
});




[Petar]

Hi Aleks,

Thank you for the shared approach. 

For those, who decide to use your solution, I must note that this approach uses the jQuery validator and not the validator that is part of the UI for ASP.NET Core suite. For consistency, we recommend using the validator shipped in the suite as our components are tested with it. 

Regards,
Petar
Progress Telerik

[Aleks]

Right.

To be clear, you recommend removing the validation framework that is supplied by Microsoft with ASP.NET Core, enabled by default in the ASP.NET Core templates and is extensively documented, and replace it with the Telerik one?

[Petar]

Hi Aleks,

It is a choice of each developer or dev team to select what validation will use in their project.

What I meant to say with my previous reply is that, if there are issues with the validation of the UI for ASP.NET Core components such problems should be less when using the Validator shipped with the UI for ASP.NET Core suite, compared to the potential issues with the built-in validator.

Everyone has the freedom to chose what to use.

Regards,
Petar
Progress Telerik

[Aleks]

Hi Petar,

Thanks for clarifying.

So rather that just suggesting we replace all of our validation code, why not just acknowledge the problem and provide the solution.

After all... it's already documented:

https://docs.telerik.com/aspnet-mvc/getting-started/helper-basics/validation#employing-jquery-validation

[Petar]

Hi Aleks,

Thank you for sharing the documentation link. 

Regards,
Petar
Progress Telerik