2

フォームに 4 つのフィールドがあります。名前、年齢、出身地、出身地。name と age はエラー クラス (error1) に属し、from と to はエラー クラス (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

次の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 のエラー ラベル スタイル設定のクラスをお勧めします。自分のやり方で行うと、2番目の送信でスタイリングが失われるためです。

<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

Replace this code:

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