jQuery 验证复杂规则：不适用但不启动时自动关闭

Question

在下面的脚本中，我有一个复杂的 jQuery-Validate 规则，如果 "Comments" 在 "Type 2" 上特别是空白，但在任何其他情况下都不会触发。

大多数情况下，jQuery 验证会在错误得到更正后自动隐藏消息然后重新提交表单。在这个复杂的规则中，一旦收到错误，如果您返回 "Type 1"，错误不会消失。

我尝试在收音机的 change() 事件中将 .valid() 强制设置为 "Comments"。但这有一个缺点，即第一次选择 "Type 2" 时，您会在输入任何内容之前自动看到错误。

我的目标：(1) 不要在用户选择类型时一开始就出现错误。 (2) 如果提交后收到错误，切换到Type1应该会自动隐藏它。

自动隐藏更正应该同时输入内容（这可以正常工作），或切换单选按钮。

jQuery.validator.addMethod("chkType2Comments",checkType2Comments);

$("#myform").validate({
    rules: {
     "comments": {
          chkType2Comments: true
        }
    },
    messages: {
        "comments" : {
            chkType2Comments: "Comments required"
        }
    }
});

function checkType2Comments() {
 var type = $('input[name="type"]:checked').val();
 if (type == '2') {
  if ($('input[name=comments]').val().trim() == '') {
   return false;
  } 
 }
 return true;
}

$('#submitForm').click(function() {
   $('#myform').valid();
})

// Radiobutton switching -- if I remove this, the error doesn't go away on switching back.
// But if I leave this code, the error comes up immediately.
// Goal: Error not initially shown, but if Type is switched afterwards, auto-turned off.
/*
$('input[name=type]').change(function() {
    $('input[name=comments]').valid();
});
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>

<form id="myform">

   <input type="radio" name="type" value="1" /> Type 1 <br/>
   <input type="radio" name="type" value="2" /> Type 2 <br/>
   
   <input type="text" name="comments" />

   <input type="button" id="submitForm" value="submit"/>

</form>

Answer 1

"My goal: (1) Do not present the error initially as the user selects Types. (2) If the error is received after Submit, switching to Type1 should auto-hide it."

因此，将您的 change 处理程序放在 click 处理程序中，这样您的单选按钮就会被忽略，直到第一次单击 "submit"。

$('#submitForm').on('click', function() {

    $('#myform').valid();

    $('[name="type"]').on('change', function() {
        $('[name="comments"]').valid();
    });

});

演示：jsfiddle.net/5hdoc2wv/2/

jQuery 验证复杂规则：不适用但不启动时自动关闭

jQuery Validate on a Complex Rule: Turn off automatically when not applicable but not on startup

jquery

jquery-validate