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与它无关。