Question

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

如果用户未填写必填字段并按下继续按钮，则应收到错误消息BESIDE或ABOVE该字段。
如果他忘记填写某些字段，则不应清除其他输入字段（因为我不希望他/她再次厌倦重新回答所有这些问题）

这是我到目前为止用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：function部分的时候），为了修复它，我添加了放置部分，但现在它什么都没显示！

有人可以帮我解决吗？

谢谢，

Answer 1

引用OP：

＆＃34;如果用户未填写必填字段并按下继续按钮，则应收到错误消息BESIDE或ABOVE该字段。＆＃34;

你这样做的方式比它需要的更复杂。

只需在insertBefore回调中使用insertAfter，而不是默认errorPlacement。

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

然后使用errorElement选项将label更改为div，这会强制邮件进入自己的行。这会在您的单选按钮组中显示上面的消息，就像您请求的那样。

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

引用OP：

＆＃34;如果他忘记填写某些字段，则不应清除其他输入字段（因为我不希望他/她再次厌倦重新回答所有这些问题）＆＃34;

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

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'));

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

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

2 个答案: