Cannot validate Chosen select with jQuery Validate (not unobtrusive)

Question

I am trying to make simple DropDownList validation (clear jQuery - no unobtrusive) in my ASP.NET MVC 4 application.

I have fields in model:

[DisplayName("Wybierz płatnika")]
public virtual int? studyPayerId { get; set; }
public virtual IList<StudyPayer> PayersList { get; set; }

Then in controller I do:

var payers = RisDbPersistanceManager.RetrieveEquals<StudyPayer>("IsActive", true); 
if (payers != null)
{
  model.PayersList = payers;  // it is populated                 
}
model.studyPayerId = null;

And in my View:

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>

...

$('#studyPayerId').rules('add',
{
    required: true,
    messages: {
        required: "Proszę wybrać płatnika!"
    }
});    
...
<div class="formsElement" >
  <div class="formsElementLabel" >
    @Html.LabelFor(x => x.studyPayerId)
  </div>
  <div class="formsElementInput" >
    @Html.DropDownListFor(x => x.studyPayerId, new SelectList(Model.PayersList, "Id", "Name", Model.studyPayerId), "-- wybierz płatnika --")
    @Html.ValidationMessageFor(x => x.studyPayerId)
  </div>
</div>

In simple TextBox fields everything works - validates my field on Submit button click. But DropDownList does not display any message when I did not choose anything and leave "-- wybierz płatnika --" selection.

EDIT

  <select id="Gender" class="error" name="Gender" style="display: none;">
  <label class="error" for="Gender">Proszę wybrać płeć!</label>
  <div id="Gender_chosen" class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 127px;" title="">
    <a class="chosen-single" tabindex="-1">
    <span>-- nieokreślona --</span>
  <div>
  </a>
  <div class="chosen-drop" style="top: 34px; bottom: auto;">
</div>

Add the `[Required]` attribute to property `studyPayerId` and let `jquery-validate-unobtrusive` handle your client side validation (no need for the script!) — , Jan 27 '15 at 08:27
No difference, I have tried it before for inspection. But I need to turn off and on validation depending on some settings that's why I'm turn it on in jQuery. — Sebastian Xawery Wiśniowiecki, Jan 27 '15 at 08:33
Then use a [RequiredIf](http://foolproof.codeplex.com/) attribute — , Jan 27 '15 at 08:37
Side note: The last parameter of you `SelectList` constructor ( `.., Model.studyPayerId`) is pointless since you binding to a property (its ignored by the html helper). — , Jan 27 '15 at 08:44
I also tried without that argument. I spend 6 hours on the code that why I am here. I don't know what is wrong. In other view it works also with DropDownList. — Sebastian Xawery Wiśniowiecki, Jan 27 '15 at 08:46
Then there is something else wrong (and adding the rules by it self wont work for unbtrusive validation which reads the `data-val-*` attributes of the controls). Post you html generated when you add the `[Required]` attribute. — , Jan 27 '15 at 08:49
There is something wrong with the html you posted - it generates `` (not ` — , Jan 27 '15 at 09:07
Not possible without something else at play. Can you confirm that `payers` contains only 3 elements. — , Jan 27 '15 at 09:12
Yes 3. I will paste some information from FireBug for a moment. — Sebastian Xawery Wiśniowiecki, Jan 27 '15 at 09:14
You said it works in other views. Check the html generated in them - I'm sure you will see ` — , Jan 27 '15 at 09:18
HTML is the same, but there is no warnings that you can see in the print screen (last 3 warnings in jquery.validate.js files) — Sebastian Xawery Wiśniowiecki, Jan 27 '15 at 09:22
Too small to read! But its all very strange and I cant think of what might be causing the problem. All I can suggest is that you compare this view with those that are working to see if there are any obvious differences, or create a new test view and just include the `DropDownListFor()` and `ValidationMessageFor()` for `studyPayerId` with no other controls or scripts (except the jquery files) — , Jan 27 '15 at 09:37
I think the problem is: jQuery Validate do not validate hidden fields and — Sebastian Xawery Wiśniowiecki, Jan 27 '15 at 12:07
Your using a plugin for the select! Don't you think that was worth mentioning in the question! — , Jan 28 '15 at 00:56
A standard dropdownlist is not hidden! if it is, you have some other javascript code or plugin doing it. — , Jan 28 '15 at 09:22
DropDownList is build dynamicaly with and elements. And data is kept in "display: none;" — Sebastian Xawery Wiśniowiecki, Jan 28 '15 at 09:27
I suggest you edit the title of your question _Cannot validate DropDownList using Chosen Select plugin_ or similar — , Jan 28 '15 at 09:31
I agree with @StephenMuecke. **Neglecting to mention that the dropdown list is created by another plugin like Chosen was a huge failure by the OP.** This information was absolutely critical to answering this question properly and not wasting everyone's time. — Sparky, Jan 28 '15 at 16:30

score 2 · Accepted Answer · edited May 23 '17 at 12:20

This is JavaScript so you'll need to show us the RENDERED and relevant HTML code as seen by the browser, not your model, view or controller. Since I cannot see your rendered HTML, I use generic naming in my demo code below.
- The first option element must have a value="" attribute.
- The select element must have a name attribute even if you don't use it.
I don't see your call to the .validate() method. The plugin must first get initialized with the .validate() method. You cannot use the .rules() method without it.

jQuery:

$(document).ready(function () {

    $('#myform').validate(); // <- INITIALIZE plugin

    $('#studyPayerId').rules('add', {
        required: true,
        messages: {
            required: "Proszę wybrać płatnika!"
        }
    });

});

Rendered HTML:

<form id="myform">
    <select name="myselect" id="studyPayerId">
        <option value="">-- wybierz płatnika --</option>
        <option value="1">option 1</option>
    </select>
    <br/>
    <input type="submit" />
</form>

Working DEMO: http://jsfiddle.net/nwLqdemu/

I do not understand why you're using the .rules() method. Usually that's is only used when rules need to be added and removed dynamically; or when rules get applied to an entire group of elements at once, because that would be too lengthy to be included within the .validate() method.

Otherwise, you'd simply declare rules within the .validate() method upon initialization...

$(document).ready(function () {

    // INITIALIZE plugin

    $('#myform').validate({ 
        rules: {
            myselect: {  // <- NAME attribute
                required: true
            }
        },
        messages: {
            myselect: {  // <- NAME attribute
                required: "Proszę wybrać płatnika!"
            }
        }
    });

});

Working DEMO 2: http://jsfiddle.net/nwLqdemu/1/

Please see the SO Tag Wiki page for a basic demo and hints on proper usage.

EDIT:

Since you never mentioned using the "Chosen" plugin for creating your drop down list, there is no way anyone could have answered this question. However, since the jQuery Validate plugin ignores hidden elements by default, you'll need to change the ignore option to [] in order to "ignore nothing" and validate the element hidden by Chosen.

The problem was there: DropDownList keeps its data in hidden — Sebastian Xawery Wiśniowiecki, Jan 28 '15 at 09:23
@XaweryWiśniowiecki, how could anyone know the select was being created by Chosen since you never mentioned it in the original question? Furthermore, you are continuing to use jQuery Validate as if you have `unobtrusive` installed. Since you stated that you are not using `unobtrusive`, I've tried to show you how to properly use the plugin. — Sparky, Jan 28 '15 at 16:26

Cannot validate Chosen select with jQuery Validate (not unobtrusive)

EDIT

1 Answers1