jquery验证错误的位置（单选按钮）

我想使用jquery验证插件来验证我的表单。我的错误消息出现在我的大部分输入元素的右侧，但单选按钮只给我带来麻烦。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;}。

来源

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

来源

2011-05-05 20:48:13 Jason

这是在验证功能，正如消息和规则块。 – Jason 2011-05-05 20:49:18

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

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

来源

2013-10-01 18:29:36 user1949102

不要甚至需要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验证插件将自动取消隐藏和显示“需要“的消息。

来源

2014-05-09 16:09:20 armyofda12mnkeys

这应该是更正的答案。毫不费力和逻辑少。 – JunaidFarooqui 2016-06-26 10:42:21

真junaidfarooqui，谢谢armyofda12mnkeys你救了我的一天 – 2016-11-24 11:15:49

只需使用一些CSS：

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

来源

2015-03-26 13:13:58 user1032531

jquery验证错误的位置（单选按钮）

回答

相关问题