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

【问题标题】：Jquery validation error placement (radio buttons)Jquery 验证错误放置（单选按钮）
【发布时间】：2011-08-04 09:30:05
【问题描述】：

我正在尝试使用 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;}。

【问题讨论】：

标签： javascript jquery radio-button

【解决方案1】：

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

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

【讨论】：

这是验证功能中的一个块，就像消息和规则一样。

【解决方案2】：

甚至不需要 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 插件会自动取消隐藏它并显示“必需”消息。

【讨论】：

这应该是更正的答案。毫不费力，逻辑更少。
真正的 junaidfarooqui，谢谢 Armyofda12mnkeys 你拯救了我的一天
非常简单的解决方案...为我工作:)

【解决方案3】：

只需使用一些 CSS：

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

【讨论】：

我猜这取决于 HTML 结构，因为这个简单的解决方案在我的情况下不起作用（我制作的带有自定义主题的 Drupal 8 表单）。我尝试只使用 CSS（position: absolute、float 等），但最后我使用了errorPlacement

【解决方案4】：

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

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

【讨论】：