jQuery驗證插件錯誤消息放置單選按鈕

Question

請有人幫助我，我真的堅持了一整天。 我有一個不同類型的輸入（電臺，複選框等）的PHP形式（多頁）。我需要的是：

1. 如果用戶不填寫必填字段，然後按下繼續按鈕，他應該收到錯誤消息旁邊或上方，這一領域。

2. 如果他忘記填寫某些領域，其他輸入字段不應該被清除（因爲我不想讓他/她感到厭倦再重新回答所有這些問題的）

這是我迄今使用jQuery插件嘗試：（對不起，我不能貼上全部的代碼，因爲它太長）

<form name="MovieSurvey" id="formId" action="page2.php" method="post" /> 
<fieldset id = "q1"> <legend class="Q1"></legend> 
<label> What is your gender?<span>*</span></label> 
<div class="fieldset content"> 
<div class="error_message_holder"></div> 

<Input type = 'radio' Name ='q1' value = 'male'>Male 
<Input type = 'radio' Name ='q1' value = 'female'>Female 
</div> 
</fieldset> 
.... 
.... 
<input type="submit" name= "continue1" value="Continue" /> 
</form> 

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script> 
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script> 

<script> 
$(document).ready(function() { 
$('#formId').validate({ // initialize the plugin 
    rules: { 
     q1: { 
      required: true, 
     }, 
     q2: { 
      required: true, 
     }, 
     q5: { 
      required: true, 
     }, 
     q6: { 
      required: true, 
     } 
    }, 

    errorPlacement: function(error, element) { 
     error.html('Please fill this field'); 

    if(element.closest('.fieldset content').find('label.error').length==0){ 
     error.insertBefore(element.closest('.fieldset content').find('.error_message_holder')); 

    } 
    }  

}); 
}); 
</script> 
</div> 
</fieldset> 

</body> 
</html> 

它的工作原理差不多好了，唯一的問題是之間顯示的錯誤信息無線電按鈕和標籤！ （這是當我不寫errorPlacement：函數部分），爲了解決它，我添加了放置部分，但現在它什麼也沒有顯示！

有人可以幫我解決嗎？

感謝，

Answer 1

報價OP：

「如果用戶不填寫必填字段，然後按下繼續按鈕，他應該收到錯誤消息旁邊或上方，這一領域。」

您正在使這種方式比它需要更復雜。

• 只需使用insertBefore，而不是默認的insertAfter，在errorPlacement回調。

  errorPlacement: function (error, element) { 
      // error.insertAfter(element); // default function 
      error.insertBefore(element); 
  }, 
  

• 然後使用errorElement選項將label變成一個div，這迫使該消息到自己的行。這會導致上面的您的單選按鈕組，正如您所要求的。

  errorElement: 'div' // default is 'label' 
  

報價OP：

「如果他忘記填寫某些領域，其他輸入字段不應該被清除（因爲我不想讓他/她得到無聊再次回答所有這些問題）「

這已經是默認行爲。這個插件不會，也不能改變任何鍵入字段的值。它只阻止提交併顯示/隱藏錯誤消息。

DEMO：http://jsfiddle.net/9bkjsg8o/

文檔（所有選項）：http://jqueryvalidation.org/validate

---

注意：

你form元素過早地在開放標籤的/>關閉.. 。

<form name="MovieSurvey" id="formId" action="page2.php" method="post" /> 

的form是容器元件，因此已經有一個稱爲</form>一個結束標記。

你打開標籤應該是這樣的......

<form name="MovieSurvey" id="formId" action="page2.php" method="post"> 

Answer 2

好耶，那是因爲你的錯誤消息架前插入。

我覺得應該是：

error.appendTo(element.closest('.fieldset content').find('.error_message_holder')); 

BTW：這個問題不應該被標記爲 「PHP」。 PHP與它無關。