We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

129253 Mar 7,2017 11:56 AM UTC Mar 10,2017 11:20 AM UTC ASP.NET Core 6
loading
Tags: DropDownList
Sean McGurk
Asked On March 7, 2017 11:56 AM UTC

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 [Syncfusion]
Replied On March 8, 2017 11:39 AM UTC

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
Replied On March 8, 2017 01:52 PM UTC

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
Replied On March 8, 2017 02:52 PM UTC

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 [Syncfusion]
Replied On March 9, 2017 07:19 AM UTC

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
Replied On March 9, 2017 10:06 AM UTC

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 [Syncfusion]
Replied On March 10, 2017 11:20 AM UTC

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.  
 
  
    
Regards,   
Gopi G.   


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;