jQuery验证不起作用。 它没有验证

Question

Below is attached source code of JSP page. I dont know why my validation framework is not working ?

Can Any Body help me out with there prior experience.

Whenever i am trying to hit on submit button without clicking selection radio buttons. it should give me validation problem . But it is not working.

Dont what gone wrong in my script?

Can you please review it and help me out?

HTML Code :

<form method="post" id="identityVerification">
                <div class="error-message" id="error-message1" style="display:none;">
                    <p id="err_cars" style="font-size:13px;"></p>
                    <p id="err_street" style="font-size:13px;"></p>
                </div><br/>
                <div>
                    <p style="padding-bottom:15px; font-size:13px;">Which of the following car is registered under your name in state of Washington?</p>
                                <input type="radio" name="questions[0].answer" value="Ford Focus" id="questions[0].answer_0"></input>
                                <label for="questions[0].answer_0">Ford Focus</label>
                                <input type="radio" name="questions[0].answer" value="Chevy Aveo" id="questions[0].answer_1"></input>
                                <label for="questions[0].answer_1">Chevy Aveo</label>
                                <div class="clear"></div>
                                <input type="radio" name="questions[0].answer" value="Toyota Celica" id="questions[0].answer_2"></input>
                                <label for="questions[0].answer_2">Toyota Celica</label>
                                <input type="radio" name="questions[0].answer" value="None of these" id="questions[0].answer_3"></input>
                                <label for="questions[0].answer_3">None of these</label>
                                <div class="clear"></div>
                </div>
                <br/><br/><br/><br/>

                <div>
                    <p style="padding-bottom:15px; font-size:13px;">Which of the following street are you currently residing or have previously resided?</p>
                                <input type="radio" name="questions[1].answer" value="1 Grape Vine" id="questions[1].answer_0"></input>
                                <label for="questions[1].answer_0">1 Grape Vine</label>
                                <input type="radio" name="questions[1].answer" value="23 Main Street" id="questions[1].answer_1"></input>
                                <label for="questions[1].answer_1">23 Main Street</label>
                                <div class="clear"></div>
                                <input type="radio" name="questions[1].answer" value="87 Market Street" id="questions[1].answer_2"></input>
                                <label for="questions[1].answer_2">87 Market Street</label>
                                <input type="radio" name="questions[1].answer" value="None of these" id="questions[1].answer_3"></input>
                                <label for="questions[1].answer_3">None of these</label>
                                <div class="clear"></div>
                </div>
                <br/><br/><br/><br/>
                <input type="submit" class="ButtonFirst" value="Submit" id="submitVerifyButton">
            </form>

JavaScript Code :

$(document).ready(function()
        {
            validationRules = {
                    "cars": {required:true},
                    "street": {required:true}

                },
            validationMessages = {
                    "cars": "Please select car registered under your name",
                    "street": "Please select your residential street"
                };
            $("#identityVerification").validate(
            {
                rules: validationRules,
                messages: validationMessages,
                highlight: function(element) {
                    var id = element.id,
                    errorElement = $("#err_" + id),
                    errorContainer = errorElement.closest("div.error-message");
                    $(element).addClass("error-message");
                    errorContainer.show();  
                },
                unhighlight: function(element) {
                    var id = element.id;
                    $(element).removeClass("error-message");
                },
                success: function(errorElement)
                {
                    var errorContainer = errorElement.closest("div.error-message");         
                    if(errorContainer.find("span:visible").length == 0)
                        errorContainer.hide();
                },
                errorElement: "span"

            });
        });

Answer 1

So I tested your code and I have to say that your code works fine. You just made a small mistake. Take a look to your HTML code and you will find something like this:

<input type="radio" name="questions[1].answer" value="1 Grape Vine" id="questions[1].answer_0"></input> 

The input fields has got the name questions 1 .answer and questions[0].answer . In your javascript code, you declared the radio groups with names of *street* and *cars* as required. So it points to undefined fields in your form. Jquery doesn't annoying the user with an undefined error message, so it seemed that your script doesn't work.

If you don't trust me see here .

Answer 2

I guess you haven't included jquery.validation.js file in your layout/page. Try include the js file. If you are not using jquery.validation then you should use this for client-side validation. Checkout following link for more details. http://docs.jquery.com/Plugins/Validation