javascript - 在我输入有效输入并提交其余输入字段为空的表单后，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");