Question

我的表格中有4个字段。姓名，年龄，来自和。名称和年龄属于错误类（errror1），属于错误类（error2）。

  .error1 {
      color: red;
  }
  .error2 {
      color: green;
  }

JS

 jQuery( function ($) {
     var classes = {
        'Name': 'error1',
        'Age': 'error1',
        'from': 'error2',
        'to': 'error2'
     }

     $('#form1').validate({
        rules: {
           'Name': {
               required: true
           },
           'Age': {
               required: true
           },
           'from': {
               required: true
           },
           'to': {
               required: true
           }
        },
        messages: {
          'Name': {
              required: 'Name is required!'
          },
          'Age': {
              required: 'Age is required!'
          },
          'from': {
              required: 'from is required!'
          },
          'to': {
             required: 'to is required!'
          }
       },
       errorPlacement: function ( err, element ) {
          err.addClass( classes[element.attr('name')] )
          err.insertBefore( element );
       },
       submitHandler: function ( form ) {
          form.submit();
       }
    });
});

$("#name1").click(function() {
    $("label.error2").hide();
    $(".error2").removeClass("error");
});

HTML

<form id="form1" method="post" action="">
    <div>
        <input name="Name" id="name1" />:name
    </div>
    <div>
        <input name="Age" id="age1" />:age
    </div>
    <div>
        <input name="from" id="from1" />:from
    </div>
    <div>
        <input name="to" id="to1"/>:to
    </div>
    <input type="submit" value="Save" />
</form>

我的要求是当我点击名称字段时，来自字段中的错误消息才会消失。现在，来自和来自现场的消息都消失了。我该如何实现？

jsfiddle

Answer 1

查看以下fiddle。

根据我的理解，您希望隐藏另一个字段的验证。您可以通过其id获取该字段，并找到错误标签，这是一个兄弟。

$("#name1").click(function() {
 $("#from1").siblings('.error').hide();
});

如果您想要更通用的解决方案，可以使用数据属性。

以下是一个例子：

将描述性数据属性添加到要从

执行操作的输入字段

<input name="Name" id="name1" data-hide-error-on="#from1"/>:name

然后你的js看起来像这样：

$('input[data-hide-error-on]').click(function() {
    var inputToHide = $(this).data('hide-error-on');
     $(inputToHide).siblings('.error').remove();
});

另外，我建议在父div上为您设置错误标签样式。因为你在第二次提交时会丢失样式。

<div class="green-errors">
    <input name="Name" id="name1" data-hide-error-on="#from1"/>:name
</div>

CSS：

.green-errors label.error {
    color: green;
}

请参阅此fiddle。

Answer 2

替换此代码：

$("#name1").click(function() {
 $("#form1").find($(".error2")).eq(0).hide();
 $(".error2").removeClass("error");
});

如何在单击时从错误类中删除错误消息

2 个答案: