Javascript Jquery 验证错误放置（单选按钮）

Jquery validation error placement (radio buttons)

提问by Jordan

I'm trying to use the Jquery validation plugin to validate my form. I have error messages appearing to the right of most of my input elements, but radio buttons are giving me nothing but trouble.

我正在尝试使用 Jquery 验证插件来验证我的表单。我的大多数输入元素的右侧都出现了错误消息，但单选按钮却给我带来了麻烦。

If I don't give a width for the div.group class, the error message appears on the outside of the full page (since I assume the div width is 100% of the page?) Not doing anything causes the error message to appear after the first radio button instead of the 2nd. I can't hardcode a width, since i want to use it on radio groups of several widths. How can I just make it appear at the right edge of wherever the radio buttons in the Radio buttons ends?

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

Thanks!

谢谢！

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

And then

进而

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

Maybe just a way to have the error message appear after the last radio button in the group? If I could get a handle to the last element, I could change the offset accordingly.

也许只是一种让错误消息出现在组中最后一个单选按钮之后的方法？如果我可以获得最后一个元素的句柄，我可以相应地更改偏移量。

EDIT: Aha, I just used div.group{display:inline-block;}.

编辑：啊哈，我只是使用了 div.group{display:inline-block;}。

回答by Jason

You can also use this method to place an error for a specific field wherever you want.

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

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

回答by armyofda12mnkeys

Dont even need JS errorPlacement to do it... if just place a label for the radio buttons also works like so:

甚至不需要 JS errorPlacement 来做到这一点......如果只是为单选按钮放置一个标签也可以这样工作：

<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 plugin will automatically unhide it and display the "required" messsage.

Jquery 验证插件将自动取消隐藏它并显示“必需”消息。

回答by user1032531

Just use some CSS:

只需使用一些 CSS：

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

回答by user1949102

Try this. It places the error before the object the error is raised on. If you set the first radiobutton as required, this wil work. For consistency I chose to perform this action on all inputtypes, but you can also tweak the script a little to perform this action only when a radiogroup fails validation.

尝试这个。它将错误放在引发错误的对象之前。如果您根据需要设置第一个单选按钮，这将起作用。为了保持一致性，我选择对所有输入类型执行此操作，但您也可以稍微调整脚本以仅在无线电组未通过验证时执行此操作。

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