Jquery验证错误放置(单选按钮)

Jquery validation error placement (radio buttons)

本文关键字：单选按钮 验证 错误 Jquery      更新时间：2023-09-26

我试图使用Jquery验证插件来验证我的表单。我有错误消息出现在我的大多数输入元素的右边，但单选按钮给我什么都没有，但麻烦。

如果我不给div.group类的宽度，错误信息出现在整个页面的外部(因为我假设div宽度是页面的100% ?)不做任何事情会导致错误消息出现在第一个单选按钮之后，而不是第二个。我不能硬编码一个宽度，因为我想在几个宽度的无线电组上使用它。我怎样才能让它出现在单选按钮结束的地方呢?

谢谢!

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;}

您还可以使用此方法在任何需要的地方为特定字段放置错误。

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

甚至不需要JS errorPlacement来做…如果只是为单选按钮放置一个标签，也可以像这样工作:

<label class="label_radio" for="answerswer_A">
  <input id="answerswer_A" name="answerswers[question1].choiceArray" type="radio" value="A"/>Yes
</label>
<label class="label_radio" for="answerswer_B">
  <input id="answerswer_B" name="answerswers[question1].choiceArray" type="radio" value="B"/>No
</label>
<label for="answerswers[question1].choiceArray" class="error" style="display:none;">* Please pick an option above</label>

Jquery验证插件将自动取消隐藏，并显示"required"消息

使用一些CSS:

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

试试这个。它将错误置于引发错误的对象之前。如果您按要求设置第一个单选按钮，这将起作用。为了保持一致性，我选择对所有输入类型执行此操作，但是您也可以稍微调整一下脚本，以便仅在radiogroup验证失败时执行此操作。

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