blur event not working on dropdown

Question

I have this little script that checks to see if a form is valid before enabling the Submit button:

$('#RegisterForm input').on('keyup blur', function () { 
    if ($('#RegisterForm').valid()) 
    {                   
        EnableSubmitButton();
    } 
    else
    {
        DisableSubmitButton();
    }
});

This works perfectly, except for on the dropdowns. If they are the last item to be completed, doing so does not trigger the EnableSubmitButton() method. And unlike the other inputs, if you un-selected it (or, in the case of a textbox, clear the contents) then the DisableSubmitButton(); event does not trigger.

However, if you try and submit the form without the dropdown selected, it WILL trigger the Required error inside the $("#RegisterForm").validate() method.

<select 
    class="form-control input-sm required error" 
    id="CountryId" 
    name="CountryId" 
    aria-required="true" 
    aria-invalid="true">
        <option value="">Country*</option>
        <option value="1">United States</option>
        ....
</select>

Answer 1

Your original selector is matching only elements of type <input> which does not include <select> .

You can modify your selector to include both element types:

$('#RegisterForm input, #RegisterForm select')...

Answer 2

I changed the script from this:

$('#RegisterForm input').on('keyup blur', function () { 

To this:

$('#RegisterForm input').on('keyup blur change', function () { 

And that still didn't work. But, this does work:

    // and for some reason, this dropdown isn't getting captured in the method above, so it gets it's own
    $("#CountryId").change(function () {
        if ($('#RegisterForm').valid()) {
            EnableSubmitBUtton();
        } else {
            DisableSubmitButton();
        }
    });

Seems like a stupid hack, but it gets the job done. Open to other answers.

Answer 3

下拉列表应该在表单字段内。然后模糊事件将起作用。