保持提交按钮禁用，而jquery.validation错误为真

Question

让我的验证工作正常的问题。使用jquery.validate做一个基本的登录表单，只需要几个字段。我保持禁用输入按钮，直到所有验证都已通过，但无法正常工作。只要焦点离开第一个字段并显示错误消息，第二个输入字段的错误就会显示出来。希望只有在字段接收焦点并失去焦点并检测到错误后，才会显示错误消息，就像它通常为jquery.validate一样。

所以基本上，保持提交按钮被禁用，直到所有字段都有效，但在字段被激活然后失败之前不显示错误消息。

这是我现在的小提琴：

FIDDLE

这里是JS：

$('#my-login').validate({ 
onkeyup: false, 
ignore: ":disabled,:hidden", 

     submitHandler: function (form) { 
     form.submit(); 
     } 
     }); 
     $('#my-login input').on('blur', function() { 
    var empty = false; 
    $('#my-login > input').each(function() { 
    if ($(this).val() == '') { 
     empty = true; 
    } 
    }); 
    if (this.form != (empty) && $('#my-login').valid()) { 
    $('#singleSubmitBtnLoan').prop('disabled', false); 
    } else { 
    $('#singleSubmitBtnLoan').prop('disabled', 'disabled'); 
    } 
    }); 

    $("#singleSubmitBtnLoan").bind('click', function() { 
if ($('#my-login').valid()) { 
    $('#my-login').submit(); 
} 
}); 

而且我这里的形式：

<form id="my-login" name="my-login-form" action="notYetDude" method="get"> 
<div> 
    <label for="lastName" class="proximo">Last Name</label> 
     <input type="text" id="lastName" name="lastName" aria-required="true" class="inputExtender largeFont" maxlength="50" /> 
    </div> 
    <div class="inputAdjust"> 
     <label for="userNum">Last 4 Digits of userNum</label> 
     <input type="tel" id="userNum" name="userNum" aria-required="true" maxlength="4" size="5" /> 
    </div> 
    <div> 
    <label for="appId" class="proximo" id="tt1-label">Reference Number</label> 
     <input type="tel" id="appId" name="appId" aria-required="true" maxlength="10" size="11" value="12345678" /> 
    </div> 
    <div style="margin-top: -4px"> 
    <input type="submit" id="singleSubmitBtnLoan" class="dsu-button lightBlue dsuBtnStyleLogin" disabled="true">Sign In</input> 
    </div> 

Answer 1

我认为这是由于模糊事件对整个窗体调用有效，并显示错误。

我已经改变它来隐藏UI erros，而这样做。

如果检查中的模糊事件是现在的改变，

if (this.form != (empty) && $('#my-login').validate({ 
    errorClass: "invalidtemp" 
}).checkForm()) { 

... 
} 

请检查，如果这个工程需要：

http://jsfiddle.net/passionintellectual/bnhpznd0/2/