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

Question

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:

The code for the autocomplete control is as follows: @{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 · Answer

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:

  
  
$(" #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();  
            }  
        });

Regards,Karthikeyan V.

Sean McGurk · Answer

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 · Answer

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 · Answer

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

  
 
            $("#myform").validate({  
                                                ignore: ":hidden:not([name='KeyList'])",  
 
………..  
        });

Regards, Karthikeyan V.

Sean McGurk · Answer

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 · Answer

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.