在我输入有效输入并提交其余输入字段为空的表单后，JS 验证不运行

Question

我正在开发一个 Web 目录，其中一个页面上有一个表单。使用了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");