web-dev-qa-db-ja.com

Jquery検証エラーの配置（ラジオボタン）

Jquery検証プラグインを使用してフォームを検証しようとしています。ほとんどの入力要素の右側にエラーメッセージが表示されますが、ラジオボタンで問題が発生するだけです。

Div.groupクラスの幅を指定しないと、エラーメッセージがページ全体の外側に表示されます（divの幅がページの100％であると想定しているため）。何もしないと、エラーメッセージが表示されます。 2番目の代わりに最初のラジオボタンの後。いくつかの幅の無線グループで使用したいので、幅をハードコーディングできません。ラジオボタンのラジオボタンが終了する場所の右端に表示するにはどうすればよいですか？

ありがとう！

var validator = $("#myForm").validate({
        errorElement: "div",
        wrapper: "div",  // a wrapper around the error message
        errorPlacement: function(error, element) {

            if (element.parent().hasClass('group')){
                element = element.parent();
            }


            offset = element.offset();
            error.insertBefore(element)
            error.addClass('message');  // add a class to the wrapper
            error.css('position', 'absolute');
            error.css('left', offset.left + element.outerWidth());
            error.css('top', offset.top);
    }
});

その後

<p>
    <div class="group">
        <label>Gender</label>
        Male: <input id="gender_male" type="radio" name="gender" class="required" value="Male" />
        Female: <input id="gender_female" type="radio" name="gender" class="required" value="Female"  />
    </div>

グループの最後のラジオボタンの後にエラーメッセージを表示する方法はありますか？最後の要素へのハンドルを取得できれば、それに応じてオフセットを変更できます。

編集：ああ、私はdiv.group {display：inline-block;}を使用しました。

javascriptjqueryradio-button
15
Jordan

この方法を使用して、特定のフィールドのエラーをどこにでも配置することもできます。

errorPlacement: function(error, element) {
  if (element.attr("name") == "PhoneFirst" || element.attr("name") == "PhoneMiddle" || element.attr("name") == "PhoneLast") {
     error.insertAfter("#requestorPhoneLast");
  } else {
     error.insertAfter(element);
  }
},
37
Jason

それを行うのにJSerrorPlacementも必要ありません...ラジオボタンのラベルを配置するだけでも次のように機能します。

<label class="label_radio" for="answer_A">
  <input id="answer_A" name="answers[question1].choiceArray" type="radio" value="A"/>Yes
</label>
<label class="label_radio" for="answer_B">
  <input id="answer_B" name="answers[question1].choiceArray" type="radio" value="B"/>No
</label>

<label for="answers[question1].choiceArray" class="error" style="display:none;">* Please pick an option above</label>

Jquery Validationプラグインは自動的にそれを再表示し、「必要な」メッセージを表示します。

19
armyofda12mnkeys

CSSを使用するだけです。

#myform div.group label.error {float:right;padding-left:10px;}
2
user1032531

これを試して。エラーが発生したオブジェクトの前にエラーを配置します。必要に応じて最初のラジオボタンを設定すると、これは機能します。一貫性を保つために、すべての入力タイプでこのアクションを実行することを選択しましたが、スクリプトを少し調整して、ラジオグループが検証に失敗した場合にのみこのアクションを実行することもできます。

$('form').validate({
  errorPlacement:
  function(error, element){
    var id=element[0]['id'];
    $( element ).before( "<label for='"+id+"' class='error'>"+error.text()+"</label>" );
  }
});
1
user1949102