jQuery驗證不起作用。 它沒有驗證

Question

下面是JSP頁面的源代碼。 我不知道為什么我的驗證框架不起作用？

任何身體都可以幫助我幫助您獲得以前的經驗。

每當我嘗試單擊“提交”按鈕而不單擊選擇單選按鈕時。 它應該給我驗證問題。 但這是行不通的。

我的腳本出了什么問題？

您可以查看一下並為我提供幫助嗎？

HTML代碼：

<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代碼：

$(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

因此，我測試了您的代碼，不得不說您的代碼運行良好。 您只是犯了一個小錯誤。 看一下您的HTML代碼，您會發現類似以下內容：

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

輸入字段的名稱為問題1 .answer和問題[0] .answer 。 在您的JavaScript代碼中，您根據需要聲明了名稱為*street* and *cars*的無線電組。 因此它指向表單中未定義的字段。 jQuery不會用未定義的錯誤消息來煩擾用戶，因此您的腳本似乎無法正常工作。

如果你不相信我，可以在這里看。

Answer 2

我想您尚未在布局/頁面中包含jquery.validation.js文件。 嘗試包括js文件。 如果您不使用jquery.validation，則應將其用於客戶端驗證。 查看以下鏈接以了解更多詳細信息。 http://docs.jquery.com/插件/驗證