Jquery Combobox + validation of underlying dropdown + jquery validation

Question

I am developing an application in asp.net mvc and trying to do validation using jquery validation plugin.

I have a dropdownlist which is being converted to combobox using jQuery code here:

http://jqueryui.com/autocomplete/#combobox

The problem I am having is regarding validation. If a user submits the form without choosing a value from the dropdown list then a error message is shown on the post back.

The problem I am having is that the error message goes away if I manually select a value from the underlying dropdown. However, if I use the combobox then the error message doesn't go away even though the value in the underlying dropdown changes.

The code in the combobox which updates the value is:

this._on( this.input, {
          autocompleteselect: function( event, ui ) {
            ui.item.option.selected = true;
            this._trigger( "select", event, {
              item: ui.item.option
            });
          },

How is the validation in jquery done? Does it not check if the value of the underlying dropdown changes?

Thanks!

---- HTML Markup and jQuery.

For HTML. I am using asp .net mvc code as follows:

<div class="form-group">
  @Html.LabelFor(model => model.Property.Area, new { @class = "col-xs-12 col-sm-4 col-md-2" })
  <div class="input-group col-xs-12 col-sm-8 col-md-4">@Html.DropDownListFor(model => model.Property.Area, Model.AreaLookUps, "--Select Area--", new { onchange = "initializeMapAndGeocode();", @class = "form-control combobox" })</div> 
  <div id="property-area-error" class="col-sm-offset-4 col-md-offset-2"><span class="text-danger">@Html.ValidationMessageFor(model => model.Property.Area)</span></div>
</div>

This generates the following markup

<div class="form-group">
  <label class="col-xs-12 col-sm-4 col-md-2" for="Property_Area">Area*</label>
  <div class="input-group col-xs-12 col-sm-8 col-md-4">
    <select class="form-control combobox" data-error-div-id="property-area-error" data-val="true" data-val-number="The field Area* must be a number." data-val-required="Please select the appropiate option." id="Property_Area" name="Property.Area" onchange="initializeMapAndGeocode();">
    <option value="">--Select Area--</option>

I don't have any validation method. I have simply included the jQuery validate and jQuery.Unobtrusive.Validation libraries.

Thanks.

-- Update I have created a workaround by adding giving the error div an "id" and adding the id as a data-attribute to the "select". In the combobox script, I hide this error div when combobox value changes. This might not be the the best solution though - but its a workaround.

Please show your `.validate()` method as well as the relevant HTML markup. — Sparky, Jun 27 '14 at 04:23

score 0 · Answer 1 · edited May 23 '17 at 10:32

Quote OP:

"How is the validation in jquery done? Does it not check if the value of the underlying dropdown changes?"

It simply checks the specified input, textarea, and select elements (within a form container). If you're doing something that moves data from a GUI element into a hidden input, textarea, or select element, it's up to you to manually declare your rules on the correct element. You'll probably also need to manually trigger validation on the element using the .valid() method.

Something very similar is done here: https://stackoverflow.com/a/23976174/594235

Jquery Combobox + validation of underlying dropdown + jquery validation

1 Answers1