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

Question

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

Codepen：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

  

“我想知道为什么当以编程方式设置所需的值时，jquery验证没有隐藏错误消息？”

因为插件设置为响应来自用户的触发器...键入，单击，导航等。它不是为了不断监视编程的变化而设计的。

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

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

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