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

2022-01-21 00:00:00 radio-button jquery javascript

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

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.

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

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?

谢谢！

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>

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

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.

啊哈，我刚刚使用了 div.group{display:inline-block;}.

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

推荐答案

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

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

相关文章