輸入有效輸入並提交表單時，其余的輸入字段為空，JS驗證不會運行

Question

我正在開發一個網頁目錄，其中一個頁面上有一個表單。 使用JS驗證插件。 在提交表單而不填寫任何輸入字段時，表單會按預期在每個輸入字段下面拋出錯誤！ 但是只用一個輸入框提交表單就會刷新當前頁面，因為操作值設置為當前頁面，其中包含PHP代碼，而不是停留在同一頁面上繼續為其余字段拋出錯誤尚未填寫！ 我在網上搜索，發現沒有什么用於弄清楚腳本有什么問題。 請問這里有人請查看下面的代碼並推薦最佳解決方案嗎？ 謝謝。

$(document).ready(function()  {
    $("#userForm").validate({
        rules: {
            cname: {
                required: true,
                lettersonly: true,
                minlength: 3
            },
            cemail: {
                required: true,
                email: true
            },
            cphone: {
                required: true,
                number: true,
                minlength: 10,
                maxlength: 10
            },
            cbusiness: {
                required: true,
                url: true
            },
            cbcategory: {
                required: true,
                minlength: 6
            },
            curl: {
                required: true,
                minlength: 6
            },
        },
        messages: {
            cname:  "Please enter your name",
            cemail: "Please enter a valid email address",
            cphone: {
                required: "Please enter your phone number",
                number:   "Please enter only numeric value"
            },
            cbusiness: {
                required: "Please enter your business",
                },
            cbcategory: {
                required: "Please enter a business category",
                },
            curl: {
                required: "Please enter the URL to your website",
                },
            }
    });
});

表格如下。

<form action="" method="post" name="userForm" id="userForm">

                            <input type="text" name="cname"  id="cname" placeholder=" Your Name">
                            <input type="text" name="cemail" id="cemail" class="email" placeholder="Your Email">
                            <input type="text" name="cphone" id="cphone" placeholder="Your Phone">
                            <input type="text" name="cbusiness"  id="cbusiness" class="email" placeholder=" Your Business">
                            <input type="text" name="cbcategory" id="cbcategory" placeholder="Business category">
                            <input type="text" name="curl" id="curl" class="email" placeholder="URL"><br>       

                            <label for='message'>Enter the code in the box below : </label>
                            <img src="captcha.php?rand=<?php echo rand();?>" id='captchaimg'>
                            <input type="text" id="captcha_code" name="captcha_code">

                            <input type="submit" name="Submit" id="Submit"  value="Submit" class="button1"><br>
                Can't read the image? click <a href='javascript: refreshCaptcha();'>here</a> to refresh.
                        </form>

Answer 1

假設您已經核心地包含了驗證庫，則必須為所有驗證類型設置消息，例如：

messages: {
  cname: {
     required: "Please enter your name",
     lettersonly: "Letters only",
     minlength: "Min length 3 required"
  },
  cemail: {
    required: "Please enter a valid email address",
    email: "Invalid email"
  }
}

正在使用JSFIDDLE 。

你必須包含這樣的插件文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>

更新 ：

在與OP討論聊天后，我們得出結論，插件文件必須正確包含，並且他使用的jQuery版本（v 1.7.1）和插件版本（v 1.16.0）之間存在不兼容性。 因此我們必須為lettersonly添加自定義方法。

自定義方法的代碼：

jQuery.validator.addMethod("lettersonly", function(value, element) {
  return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Letters only please");