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驗證錯誤的位置（單選按鈕）

回答

相關問題