jQuery验证不将规则应用于整个形式
问题描述:
我有由一个形式:jQuery验证不将规则应用于整个形式
- 3文本框(前两个是必填字段)
- 3台20的无线电的按钮(使用jQuery评分风格),其中每个都是必需的
- 1文本区域,这也是必需的。
如果只有一个单选按钮被选中,而其他字段没有有效数据,整个表单都会提交。似乎只要任何一个单选按钮被选中 - 其余的验证规则就无法工作。
如果您尝试提交一个空白表单,验证会启动并且每个字段上的错误都会正确显示。
如果您在各个领域,除了填写任何单选按钮,验证正确显示并排设置错误,而不是提交。
谁能告诉我我做错了什么?我使用jQuery 1.6.1和jQuery验证插件1.8.1
$(document).ready(function() {
// validate contact form on keyup and submit
$("#ratingfrm").validate({
errorElement: "span",
//set the rules for the fild names
rules: {
name: {
required: true,
minlength: 3,
maxlength:25
},
email: {
required: true,
email: true
},
website: {
required: false,
minlength: 5,
maxlength:65
},
rating1: {required: true},
rating2: {required: true},
rating3: {required: true},
rating4: {required: true},
comment: {
required :true,
minlength:5
}
},
//set messages to appear inline
messages: {
name: {
required: "<br>Your name is required.",
minlength: "<br>Please enter a minimum of 3 characters",
maxlength: "<br>Please enter a maximum of 25 characters"
},
email: "<br>A valid email is required.",
website: {
required: "<br>Please enter a valid website address",
minlength: "<br>Please enter a minimum of 5 characters",
maxlength: "<br>Please enter a maximum of 65 characters"
},
rating1: "Please rate",
rating2: "Please rate",
rating3: "Please rate",
rating4: "Please rate",
comment: {
required: "<br>Please enter a comment",
minlength: "<br>Please enter a minimum of 5 characters"
}
},
errorPlacement: function(error, element) {
error.insertAfter(element);
}
});
});
表单代码:
<form id="ratingfrm" name="ratingfrm" method="post" accept-charset="utf-8" action="/rateinput">
<fieldset class="one-fourth">
<input type="hidden" name="RID" value="154341X">
<label for="name">Name</label><br />
<input type="text" name="name" value="" />
<br /><br />
<label for="email">Email</label><br />
<input class="input" id="email" name="email" type="text" /> <br />
We will not publish or share your<br />email address with anyone else.<br /><br />
<label for="website">Website:</label><br />
<input class="input" id="website" name="website" type="text" />
</fieldset> <!-- /one-fourth -->
<fieldset class="one-fourth">
<strong>Accommodation:</strong>
<div class="Clear">
<input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="1 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="2 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="3 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="4 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="5 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="6 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="7 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="8 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="9 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="10 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="11 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="12 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="13 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="14 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="15 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="16 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="17 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="18 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="19 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="20 " />
</div><br />
<strong>Facilities:</strong>
<div class="Clear">
<input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="1"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="2"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="3"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="4"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="5"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="6"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="7"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="8"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="9"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="10"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="11"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="12"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="13"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="14"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="15"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="16"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="17"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="18"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="19"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="20"/>
</div><br />
<strong>Cleanliness:</strong>
<div class="Clear">
<input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="1"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="2"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="3"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="4"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="5"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="6"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="7"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="8"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="9"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="10"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="11"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="12"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="13"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="14"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="15"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="16"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="17"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="18"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="19"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="20"/>
</div><br />
<br /><strong>Value for Money:</strong>
<div class="Clear">
<input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="1"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="2"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="3"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="4"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="5"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="6"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="7"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="8"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="9"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="10"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="11"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="12"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="13"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="14"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="15"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="16"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="17"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="18"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="19"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="20"/>
</div><br />
</fieldset> <!-- /one-fourth -->
<fieldset class="one-half last">
<strong>Comments:</strong><br />
<textarea name="comment" cols="180" rows="7" id="comment" style="width:100%" ></textarea>
<br />
<input type="submit" name="submit" value="SUBMIT" />
</fieldset> <!-- /one-half last-->
答
我只是跑你的代码,它似乎是工作。我确实将以下代码添加到.validate()
选项中:
submitHandler: function() {
alert("do submit");
return false;
},
invalidHandler: function() {
alert("invalid form");
}
+0
谢谢,我没有尝试过自己的代码,但只在整个页面的上下文中。我将源代码分开,并在隐藏的div中找到另一组星型评级按钮,当它们被移除时,允许验证完美地工作。我唯一不明白的是按钮的名称完全不同,甚至被设置为禁用(它们显示平均评分)。再次感谢您的帮助和时间,看看我能否让他们一起工作好:) –
您的html外观如何? – Iljaas
添加表单html –