1

除非我输入文本和标签到下一个，否则我无法让我的表单验证在下面做出响应。单击不同的字段或点击提交什么都不做，我希望它在所有情况下都能响应。老实说，这是我第一次将 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>
4

2 回答 2

0

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

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

改成这个

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

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

于 2012-08-31T14:51:59.233 回答
0

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

如果您需要更多指导或进一步的解释/示例，请告诉我。祝你好运！:)

于 2012-08-31T15:03:43.793 回答