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

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>

我的要求是，当我单击名称 字段时，来自 字段中的错误消息应该只消失。现在 from 和 to 字段消息都消失了。我该如何实现？？

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 .