如果一个单选按钮规则匹配，jQuery Validate 不将规则应用于整个表单

Question

我有一个包含以下内容的表单：

• 3 个文本框（前两个为必填字段）
• 3 组 20 个单选按钮（使用 jQuery 评级设置样式），每组都是必需的
• 1 个文本区域也是必需的。

如果只有一个单选按钮被选中并且没有其他字段具有有效数据，则整个表单将提交。似乎只要选中任何一个单选按钮 - 其余的验证规则都不起作用。

如果您尝试提交一个空表单，则会启动验证，并且错误会正确显示在每个字段上。

如果您填写除任何单选按钮之外的每个字段，验证将在每个集合旁边正确显示错误并且不提交。

谁能告诉我我做错了什么？？？我正在使用 jQuery 1.6.1 和 jQuery Validation Plugin 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-->

Answer 1

我刚刚运行了您的代码，它似乎正在运行。我确实将以下代码添加到 .validate() 选项中：

        submitHandler: function () {
            alert("do submit");
            return false;
        },
        invalidHandler: function () {
            alert("invalid form");
        }