web-dev-qa-db-ja.com

jQuery validateを使用したカスタムエラーラベルの配置（エラーのすべてまたは一部）

1つのエラーラベル（Not All）をカスタムの場所に配置したいと思います。 jQueryはこの http://docs.jquery.com/Plugins/Validation/validate#toptions オプションを提供しますが、特定のエラーメッセージを配置して変更しない方法については何も見つかりませんでしたすべての残りのデフォルトの場所？

以下のすべての回答を確認してください。これには複数の解決策があります。皆さんありがとう！

jqueryjquery-validatevalidation
45
chainwork

したがって、すべてのjQuery Validateエラーメッセージを1か所に表示するには、そのページで http://docs.jquery.com/Plugins/Validation/validate#toptions （Find errorPlacement）オプションを使用します。 。

私はここでいくつかの答えに答えましたが、両方の選択肢ではありません。

1）すべてのエラーに対してカスタムプレースメントが必要な場合は、次のようにします。

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo('#errordiv');
   }
});

2）1つまたは複数のエラーラベルに特定の場所を指定する場合は、これを実行できます。

errorPlacement: function(error, element) {
    if (element.attr("name") == "email" )
        error.insertAfter(".some-class");
    else if  (element.attr("name") == "phone" )
        error.insertAfter(".some-other-class");
    else
        error.insertAfter(element);
}
75
chainwork

実際、このためにJavaScriptコードを使用する必要はなく、簡単な解決策を発見しました。 JQuery Validateに強制的に検証エラーをDOM要素に配置させることができます。

たとえば、JQueryは次のようなエラーを生成します。

 <label for="firstname" generated="true" class="error">This field required.</label>

このラベルdom要素は、次のtdブロックまたはli要素、またはこのような空白として必要なものに配置できます。

<label for="firstname" generated="true" class="error"></label>

JQueryはその空白フィールドを見つけ、エラーメッセージを表示します。

ラベル要素のforフィールドを忘れないでください！

43
Abdurrahman I.

これはより一般的なソリューションであり、OPのHTML構造に固有のものではありません。

特定のエラーラベルを別の場所に置き、残りはデフォルトの配置のままにする場合は、これを試してください...

$("#myform").validate({
  errorPlacement: function(error, element) {
     if (element.attr("name") == "myFieldName") {

       // do whatever you need to place label where you want

         // an example
         error.insertBefore( $("#someOtherPlace") );

         // just another example
         $("#yetAnotherPlace").html( error );  

     } else {

         // the default error placement for the rest
         error.insertAfter(element);

     }
   }
});

errorPlacement:オプションのオンラインドキュメント

16
Sparky

異なる場所にカスタムエラーのラベルが2つ以上ある場合、errorPlacementの場合、それぞれに単一のリターンも返さないと、クレイジーな位置エラーが発生する可能性があることがわかりました。このサンプルには、エラーラベル、1つのチェックボックスが2つありますチェックボックス、1つのラベル

HTMLコード

<p><label for="owner"><input  type="checkbox" name="option[]" id="owner" value="1"  validate="required:true, minlength:2" /> I am Owner of my Company</label></p>
<p><label for="agency"><input  type="checkbox" name="option[]" id="agency" value="1" /> I am an Agency</label>
<div id="errordiv"></div></p>
<hr>
<p><label for="agree"><input type="checkbox" name="agree" id="agree" value="1" required /> I Agree and I read the Privacy Polities and Use of Terms</label>
<div id="error_agree"></div>

脚本

<script>
        $("#register_form").validate({ 
                        errorPlacement: function(error, element) {
                            if(element.attr("name") == "option[]"){
                                error.appendTo('#errordiv');
                                return;
                            }

                            if(element.attr("name") == "agree"){
                                    error.appendTo('#error_agree');
                                    return;
                            }else {
                                error.insertAfter(element);
                            }
                       }
                    });

        </script>
0
XMaster