(JQuery) Client-Side Validation of Drop-Down List Control

[Sean McGurk]

Hi there,

I have a number of Syncfusion controls on my page that I need to validate on the client side before the form is submitted.

One of these is a drop-down list and the other is an autocomplete control.

The code for the drop-down list control is as follows:

<ej-drop-down-list id="KeyList" datasource="Model.Keys" ej-for="KeyId" watermark-text="Select Key" >

                                <e-drop-down-list-fields value="Id" text="TypeNavigation.Description" />

                            </ej-drop-down-list>

The code for the autocomplete control is as follows:

<input type="hidden" asp-for="Username" required="required" />

                                    @{Html.EJ().Autocomplete("selectAssignee")

                                        .Width("205")

                                        .Datasource(Model.Users)

                                        .MultiSelectMode(MultiSelectModeTypes.None)

                                        .FilterType(FilterOperatorType.Contains)

                                        .AllowGrouping(false)

                                        .HighlightSearch(false)

                                        .AutocompleteFields(e => e.Text("Identifier")

                                        .Key("Username")).Render();

                                    }

The jquery function that performs the validation is written as follows:

$("#issue-key-form").validate({

 

        errorElement: "div",

        errorPlacement: function (error, element) {

            error.appendTo("div#errors");

        },

        // Specify the validation rules

        rules: {

            selectAssignee: "required",

            KeyList: "required"

        },

 

        // Specify the validation error messages

        messages: {

            selectAssignee: "Please select a recipient for the key",

            KeyList: "Please select a key"

        },

 

        submitHandler: function (form) {

            form.submit();

        }

    });

However, when I submit the form with the autocomplete field empty and no value from the drop-down list selected, only the validation for the autocomplete field is picked up.

Does anyone know what I might be doing wrong?

Thanks,

Seán

[Karthikeyan Viswanathan]

Hi Sean,  

  

Thanks for contacting Syncfusion support.  

  

Dropdownlist element type is a hidden input type. So, you need to ignore the restriction case and set as empty in JQuery validation. Please find to the code example:  

  

<code>  

  

$(" #issue-key-form").validate({  

                                                ignore: [],  

            errorElement: "div",  

            errorPlacement: function (error, element) {  

                error.appendTo("div#errors");  

            },  

            // Specify the validation rules  

            rules: {  

                selectAssignee: {  

                required: true  

            },  

                KeyList: {  

                required: true  

            }  

            },  

  

            // Specify the validation error messages  

            messages: {  

                selectAssignee: "Please select a recipient for the key",  

                KeyList: "Please select a key"  

            },  

  

            submitHandler: function (form) {  

                form.submit();  

            }  

        });  

</code>  

 

Regards,
Karthikeyan V.    

[Sean McGurk]

Hi Karthikeyan,

Thanks for this - this is great!

This works, however it does perform validation on some of the conditional elements on my page that are hidden.

Any idea how I could perform validation for the dropdown list *only*?

Thanks again,

Sean

[Sean McGurk]

Will it be something like this:

http://stackoverflow.com/questions/20287567/ignore-all-hidden-div-but-not-one-in-jquery-validation/20287614#20287614

[Karthikeyan Viswanathan]

Hi Sean,    

    

   

Yes, you can exclude the hidden element and include Dropdownlist for validation. Please find to the code example:    

 

<code>  

 

            $("#myform").validate({  

                                                ignore: ":hidden:not([name='KeyList'])",  

 

………..  

        });  

 

</code>  

 

Regards,  

Karthikeyan V.  

[Sean McGurk]

Great, Karthikeyan - thanks again!

When specifying the validation rules and the validation error messages, I have the following code:

rules: {
            KeyList: "required"
        },
        messages: {         
            KeyList: "Please select a key"
        },

but I am not getting an error displayed when I don't select a key from the list and attempt to submit the form.

Thanks,

Sean

[Gopi Govindasamy]

Hi Sean,    

   

We have prepared a sample based on your requirement for “When specifying the validation rules and the validation error messages”. Find the attached  below sample link.  

 

  

Sample Link: http://jsplayground.syncfusion.com/zjm4qq11 

    

Regards,   

Gopi G.