2

我的表单中有 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

4

2 回答 2

1

看看下面的小提琴。

据我了解，您想隐藏另一个字段的验证。您可以通过其 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;
}

看到这个小提琴。

于 2013-10-15T06:53:37.950 回答
0

替换此代码：

$("#name1").click(function() {
 $("#form1").find($(".error2")).eq(0).hide();
 $(".error2").removeClass("error");
});
于 2013-10-15T06:49:56.853 回答