How to display unobtrusive jQuery validation message for drop-down when selection changes?

Question

The setup:

ASP.NET MVC 4 with client-side validation (+ unobtrusive javascript) enabled.
jquery 1.8.2
jquery.validate 1.10.0
jquery.validate.unobtrusive

The html:

<form action="/" method="post">
    <select data-val="true" data-val-required="DropDown is required." id="DropDown" name="DropDown">
        <option value="">Select a letter</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span data-valmsg-for="DropDown" data-valmsg-replace="true"></span>
    <br/>
    <button type="submit">Submit</button>
</form>

You can see it in action here.

The server-side code for the drop-down is pretty uninteresting:

// View Model
public class ViewModel
{
    [Required]
    public string DropDown { get; set; }
}

// View
@Html.DropDownListFor(m => m.DropDown,
                      new SelectList(new[] { "A", "B", "C" }),
                      "Select a letter")

And here are the steps to see the issue:

With the mouse, select one of the values (A, B, C).
With the mouse, select the default, empty, value (Select a letter). No required message is displayed.
With the arrow keys, select one of the values (A, B, C).
With the arrow keys, select the default, empty, value (Select a letter). This time, the required message is displayed.
With the mouse, select one of the values (A, B, C). Required message disappears.
With the mouse, select the default, empty, value (Select a letter). Required message is displayed.

It seems that the events don't kick in for the mouse events until validation is triggered for the first time (either by changing the values with the keyboard or pressing the submit button). Any explanations as to why this is happening (am I doing something wrong?), or workarounds, would be greatly appreciated.

Thanks!

Brent Brent · Accepted Answer · 2012-12-28T05:02:25

I believe you need to make two modifications to JQuery Validate.

1.) Add a method to define the first value of empty string as not a valid value

    $.validator.addMethod(
            "SelectLetter",
            function(value, element) {
                if ($("#DropDown").val() === ''){
                    return false;
                } else return true;
            },
            "Please Select a Letter"
    );
    var validator = $("#LetterForm").validate({
            rules: {
                    DropDown: {
                        SelectLetter: true
                    }
            }

    });

2.) Add a click() event to fire validation

$("#DropDown").click(function(){
          $("#LetterForm").validate().element("#DropDown");
        });
});

Full example http://jsfiddle.net/stupiddingo/L4c33/1/

There may be a simpler solution, but this seems to work. This is based off the answers to jQuery custom validation method issue asked previously.

How to display unobtrusive jQuery validation message for drop-down when selection changes?

1 Answers