Question

I have a form that consists of:

• 3 text boxes (first two are required field)
• 3 sets of 20 radio buttons (styled using jQuery rating), each of which is required
• 1 text area which is also required.

If just one of the radio buttons is checked and no other fields have valid data, the whole form will submit. It seems that as long as any one radio button is checked – the rest of the validation rules fail to work.

If you try and submit an empty form the validation kicks in and errors are correctly displayed on each field.

If you fill in every field except any radio button the validation will correctly display an error next to each set and not submit.

Can anyone tell me what I am doing wrong??? I am using jQuery 1.6.1 and 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 code:

<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

I just ran your code and it seems to be working. I did add the following code to the .validate() options:

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