jquery 验证：以编程方式选择单选按钮不会隐藏验证消息

Question

以编程方式选择单选按钮不会隐藏之前显示的验证消息。

代码笔：https://codepen.io/vimalanjg/pen/QQYpyE

  $(function()
  {
    $('#myform').validate(
      {
        rules:
        {
          Color:{ required:true }
        },
        messages:
        {
          Color:
          {
            required:"Please select a Color<br/>"
          }
        },
        errorPlacement: function(error, element) 
        {
            if ( element.is(":radio") ) 
            {
                error.appendTo( element.parents('.container') );
            }
            else 
            { // This is the default behavior 
                error.insertAfter( element );
            }
         }
      });

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

      $('input:radio[name="Color"][value="Red"]')
            .prop('checked', true)
            .trigger('change');
  });

以上代码是重现问题的示例。

在上面的快照中，即使选择了单选按钮，验证消息仍然显示。

我想知道为什么在以编程方式设置所需值时，jquery 验证不隐藏错误消息？

任何建议将不胜感激。

Answer 1

"I am wondering why jquery validation is not hiding error messages when the required value is set programmatically?"

因为插件被设置为响应用户的触发...打字、点击、导航等。它并不是为了持续监控程序的变化而设计的。

以编程方式执行任何可能影响表单有效性的操作时，请始终附加 .valid() 方法以便以编程方式触发验证。

$('input:radio[name="Color"][value="Red"]')
    .prop('checked', true)
    .trigger('change')
    .valid();  // trigger validation on this element

您的 CodePen 已更新：codepen.io/anon/pen/RQOKZZ

jquery 验证：以编程方式选择单选按钮不会隐藏验证消息

jquery validation: Programmatically selecting radio button does not hide validation message

javascript

jquery

jquery-validate