Question

除非我输入文字和标签到下一个，否则我无法在下面进行表单验证。单击其他字段或点击提交不会执行任何操作，我希望它在所有方案中都能响应。老实说，这是我第一次将jquery用于比启用或禁用类更复杂的任何事情，所以我可能在某处发生了一个基本错误。我无法弄清楚它是什么。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

<script type="text/javascript">
    //form validation 
   $(document).ready(function() {
       $("#form").validate({
            rules: {
                organization: {
                    required: true,
                    minlength: 2,
                    },
                firstname: {
                    required: true,
                    minlength: 2,
                    },
                lastname: {
                    required: true,
                    minlength: 2,
                    },
                email: {
                    required: true,
                    email: true,
                    },
                phone: {
                    required: true,
                    minlength: 10,
                    number: true,
                    },
            },
            messages: {
                organization: "Please enter a valid organization name",
                firstname: "Please enter your first name",
                lastname: "Please enter your last name",
                email: "Please enter a valid email address",
                phone: "Please enter a valid phone number",
            },
        });         
   });
</script>
</head>
<body>
<div id="form_container">
    <div id="form_title">REQUEST INFO</div>
    <form id="form" name="form_container" action="#">
        <!-- fields -->
        <input id="organization" type="text" name="organization" minlength="2" />
        <input id="firstname" type="text" name="firstname" minlength="2" />
        <input id="lastname" type="text"  name="lastname" minlength="2" />
        <input id="email" type="text" name="email" />
        <input id="phone" type="text" name="phone" />
        <!-- submit button -->
        <input type="button" id="button" name="submit" type="submit" value="submit" > 
    </form>
</div>
</body>
</html>

Answer 1

提交按钮上有2个类型属性

<input type="button" id="button" name="submit" type="submit" value="submit" >

将其更改为此

<input id="button" name="submit" type="submit" value="submit" />

这将导致按钮提交表单，并以您期望的方式触发验证插件。此外，您的验证配置对象在一些地方（在每个子对象的最后一个字段之后）有一些额外的尾随逗号，这些逗号可能会绊倒一些旧浏览器（特别是IE）。

Answer 2

查看.focusin()和.focusout() jQuery事件方法。您可能想要查看的另一件事是.submit()方法，如果您打算在访问者实际执行提交之前单击“提交”按钮时进行更多验证。

如果您需要更多指导或进一步说明/示例，请与我们联系。祝好运！：）

无法在点击时触发jQuery验证插件

2 个答案: