jQueryプラグインの検証 - 特定のフィールドでエラーメッセージを無効にする

Question

フォームの特定の入力フィールドについてのみエラーメッセージを無効にすることを検討しています。

この例では、私は無線入力フィールドだけのmessegeを無効にしようとしています。

jQuery(document).ready(function($) { 
 
    "use strict"; 
 

 
    $("form").validate(); 
 

 
    $('input[type="radio"]').validate({ 
 
    errorPlacement: function(error, element) { 
 
     return false; 
 
    } 
 
    }); 
 
    
 
    $(document.body).on('click', '.submiter', function() { 
 
\t \t $("input").valid(); 
 
\t }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script> 
 

 

 
<form> 
 
    <fieldset> 
 
    <p> 
 
     <label for="title-Mr">Mr</label> 
 
     <input id="title-Mr" type="radio" name="title" value="MR" class="required"> 
 
    </p> 
 
    <p> 
 
     <label for="bading">Bading</label> 
 
     <input id="bading" type="text" name="bading" class="required"> 
 
    </p> 
 
    </fieldset> 
 
    <p> 
 
    <a class="submiter" href="#submit">submit</a> 
 
    </p> 
 

 

 
</form>

Answer 1

https://jqueryvalidation.org/validateのマニュアルを参照してください。

jQuery(document).ready(function($) { 
 
    "use strict"; 
 

 
    $("form").validate({ignore: ".ignore"}); 
 

 
    
 
    $(document.body).on('click', '.submiter', function() { 
 
\t \t $("input").valid(); 
 
\t }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script> 
 

 

 
<form> 
 
    <fieldset> 
 
    <p> 
 
     <label for="title-Mr">Mr</label> 
 
     <input id="title-Mr" type="radio" name="title" value="MR" class="required ignore"> 
 
    </p> 
 
    <p> 
 
     <label for="bading">Bading</label> 
 
     <input id="bading" type="text" name="bading" class="required"> 
 
    </p> 
 
    </fieldset> 
 
    <p> 
 
    <a class="submiter" href="#submit">submit</a> 
 
    </p> 
 

 

 
</form>

Answer 2

ここでは一つの解決策は

<script> 
    jQuery(document).ready(function($) { 
    "use strict"; 

    $('form').validate({ 
    errorPlacement: function(error, element) { 
     if(element.attr('id') == 'title-Mr'){ 
     return false; 
     } 
    } 
    }); 

    $(document.body).on('click', '.submiter', function() { 
     $("input").valid(); 
    }); 

}); 
</script> 

です：ちょうどフィールドを特定するクラスを持っているあなたはform.validateコールで「無視」オプション検証すると使用していません

Answer 3

このシナリオの最良の選択肢は、次のいずれかです。

1. ラジオボタンが不要な場合は、無線入力からclass="required"属性を削除します。

2. 関数の内部にignore: <selector>を指定することによって、その要素の検証を無視します。

   $('input[type="radio"]').validate({ 
       ignore: "title-Mr" 
   }); 
   

3. あなたはラジオボタンは依然として必要になることがしたいのですが、メッセージが表示されない場合は、その特定の識別子にnullメッセージを指定します。

   $('input[type="radio"]').validate({ 
       messages: { 
        "title-Mr": null 
       } 
   }); 
   

はhttps://jqueryvalidation.org/によると、フロントページ上のビデオは、それぞれがますます複雑になってきて、いくつかの異なるシナリオを説明します。基本的なカスタマイズを指定する方法を示すシナリオでは、$().validate()関数に渡される2つの主要な部分が「ルール」と「メッセージ」であることが説明されています。 "メッセージ"の中で、サブキーはカスタマイズしているフォームフィールドメッセージのIDです。 "無視する"のような他のオプションもあります。

これが役に立ちます。

Answer 4

errorPlacement関数にif文を追加することでわかりました。私が後だものではないのです完全な検証を無視

jQuery(document).ready(function($) { 
 
    "use strict"; 
 

 
    $("form").validate({ 
 
    errorPlacement: function(error, element) { 
 
     if (element.is(":radio")) { 
 
     return false; 
 
     } else { 
 
     error.insertAfter(element); 
 
     } 
 
    } 
 

 
    }); 
 

 

 
    $(document.body).on('click', '.submiter', function() { 
 
    $("input").valid(); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script> 
 

 

 
<form> 
 
    <fieldset> 
 
    <p> 
 
     <label for="title-Mr">Mr</label> 
 
     <input id="title-Mr" type="radio" name="title" value="MR" class="required"> 
 
    </p> 
 
    <p> 
 
     <label for="bading">Bading</label> 
 
     <input id="bading" type="text" name="bading" class="required"> 
 
    </p> 
 
    </fieldset> 
 
    <p> 
 
    <a class="submiter" href="#submit">submit</a> 
 
    </p> 
 

 

 
</form>