模糊事件不适用于下拉菜单

Question

我有这个小脚本，可以在启用提交按钮之前检查表单是否有效：

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

这工作完美，除了下拉菜单。 如果它们是要完成的最后一项，则这样做不会触发EnableSubmitButton()方法。 与其他输入不同，如果您取消选择它（或者，在文本框的情况下，清除内容）然后DisableSubmitButton(); 事件不触发。

但是，如果您尝试在未选择下拉列表的情况下提交表单，它将触发 $("#RegisterForm").validate() 方法中的Required错误。

<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

您的原始选择器仅匹配<input>类型的元素，其中不包括<select> 。

您可以修改选择器以包含两种元素类型：

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

Answer 2

我从这个改变了脚本：

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

对此：

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

这仍然不起作用。 但是，这确实有效：

    // 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();
        }
    });

看起来像一个愚蠢的黑客，但它完成了工作。 打开其他答案。

Answer 3

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