单选按钮的jQuery Validation插件错误消息放置

请有人帮助我,我真的坚持了一整天。 我有一个PHP表单(多页)与不同类型的输入(收音机,复选框等)。 我需要的是:

  1. 如果用户未填写必填字段并按下继续按钮,则应收到错误消息BESIDE或ABOVE该字段。

  2. 如果他忘记填写某些字段,则不应清除其他输入字段(因为我不希望他/她再次无意中重新回答所有这些问题)

这是我到目前为止用JQuery插件尝试过的:(对不起,我无法粘贴所有代码,因为它太长了)

Male Female
.... ....
$(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')); } } }); });

它工作得很好,唯一的问题是在单选按钮和标签之间显示错误信息! (这是我不写errorPlacement:function部分的时候),为了修复它我添加了放置部分,但现在它什么也没显示!

有人可以帮我解决吗?

谢谢,

引用OP:

“如果用户没有填写必填字段并按下继续按钮,他应该收到错误消息BESIDE或ABOVE该字段。”

你使这种方式比它需要的更复杂。

  • 只需在errorPlacement回调中使用insertBefore ,而不是默认的insertAfter

     errorPlacement: function (error, element) { // error.insertAfter(element); // default function error.insertBefore(element); }, 
  • 然后使用errorElement选项将label更改为div ,从而强制将消息放在自己的行上。 这会在您的单选按钮组上方生成一条消息,就像您请求的那样。

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

引用OP:

“如果他忘了填写某些字段,其他输入字段不应该被清除(因为我不希望他/她再次厌倦重新回答所有这些问题)”

这已经是默认行为了。 此插件不会也不能更改键入字段的任何值。 它只阻止提交和显示/隐藏错误消息。

演示: http : //jsfiddle.net/9bkjsg8o/

文档(所有选项): http : //jqueryvalidation.org/validate


注意

您的form元素在开始标记中过早关闭并带有/>

 

form是一个容器元素,因此已经有一个名为的结束标记。

你的开场标签应该是这样的……

 

嗯,是的,因为你在错误消息持有者之前插入它。

我认为它应该是:

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

顺便说一句:这个问题不应该被标记为“PHP”。 PHP与它无关。