Question

我有一个包含多个字段的表单，其中一些我希望在keyup和submit上验证。我正在调用jquery 1.9.1然后调用插件（1.11.1），然后使用我的js调用外部文件。我通过Firebug看到他们都在装载。如果我使用下面的代码，它根本不验证 - 表单提交，我得到mysql错误，因为我没有填写字段。这是js代码：

    $("#untForm").validate({
     onfocusout: true,
    rules: {
        attachment: {
            required: "false",
            accept: "jp?g,png,gif,txt"
        },
        recipient: {
            required: "true"
        },
        messageInput: { 
            required: "true"
        },
        cc_email: {
            email: "true"
        }
    },
    messages: {
        attachment: {
            accept: "Only image type jpg/png/jpeg/gif and .txt are allowed"
        },
        recipient: {
            required: "Please enter a recipient"
        },
        messageInput: {
             required: "Please enter a message"
        },
        cc_email: {
            email: "Please enter a valid email address"
        }
    },
    });

如果我在开头添加这段代码：

$("#untForm").submit(function() {

它在提交时验证 - 除了cc_email字段之外的所有内容。这永远不会得到验证。我的所有表单字段都有一个name属性。这似乎是我必须遗漏一些简单的东西，但我花了几个小时看这个，以及这个表格上的其他Q＆amp; A.谁能看到我错了什么？

部分html标记：

<form action=""  id="untForm" enctype="multipart/form-data"  class="general" method="post" >
    <h1>Send a Message</h1>
    <hr color="#ff6C00" width="100%"><br>
    <label for="recipient">To: <span>(required)</span></label>
        <input type="text" name="recipient"  id="recipient" class="form-input" "required" />
<label for="attachment">Attachment: <span>(optional)</span></label>
<img src="images/paperclip.png" width="32px"><input type="file" name="attachment" id="attachment" /></img>
                                                   <label for="cc_email">Cc: <span>(optional)</span></label>
   <input type="text" name="cc_email" id="cc_email" class="form-input" />
                                                       <textarea id="messageInput" class="form-input" name="messageInput" cols="30" rows="30" required></textarea>

    <input class="form-btn" type="submit" value="Submit Form" />

Answer 1

你有几个问题......

1）默认情况下，onfocusout选项已激活。 As per the documentation，将其设置为true ＆＃34;不是有效值＆＃34; 。（将其设置为true可能会破坏内容。）如果您需要此选项，则必须省略onfocusout: true，因为它已经是默认选项。

2）具有布尔参数的规则（例如required）不会在true参数周围获得引号。

required: true

3）不确定为什么required: false字段上有attachment。如果您未指定required规则，则不需要该字段（它是可选的）。如果将其设置为false，则将它设置为"jp?g,png,gif,txt"没有任何意义。

4）根据您|的参数，我不确定您是否打算使用the accept rule，这是针对MIME类型的。这些看起来像文件扩展名，在这种情况下，您应该使用the extension rule。如果是这种情况，则需要使用accept字符分隔。请参阅：http://jqueryvalidation.org/extension-method/

5）当您使用extension或cc_email规则时，必须包含the additional-methods.js file，以防万一您没有。

6）不确定你的意思是什么＆＃34;未经过验证＆＃34;在email字段上。您只定义了required规则，因此当您输入非电子邮件地址时，它会给您一个错误。但是，您未指定required规则，因此该字段将是可选的。如果您想要强制要求，请添加cc_email: { required: true, email: true }。

$("#untForm").submit(function() {

7）＆＃34;如果我在开头添加这段代码：＆＃34; .validate()

您绝对不需要添加提交处理程序。该插件已捕获提交按钮的单击并自动处理所有。

8）您的代码必须包含在DOM就绪处理程序中，以确保在调用submit()方法时表单的HTML标记存在。（这个省略解释了为什么在你将它包含在<img>处理程序中之前没有任何工作。）

DEMO：http://jsfiddle.net/ca2Rd/

带有标记的演示：http://jsfiddle.net/mECS9/

HTML标记问题。

1）<br />元素不是容器，没有结束标记，并且您不能将其他元素放在其中。它们是独立且自动关闭的，类似于<img> ... </img>标记。

无效：<img></img>

无效：<img />

有效：<img>

有效：required

2）您不需要<textarea>标记内的required属性，因为您已经在.validate()方法中定义了{{1}}规则。

引用OP：

＆＃34; ...我收到mysql错误，因为我没有填写字段......＆＃34;

这是一个非常严重的问题。通过JavaScript或jQuery进行客户端验证，通常可以绕过，中断或禁用。因此，您应该从不依赖任何客户端代码来保护您的数据库免受错误。

您必须在服务器端拥有代码以验证传入数据，因此即使客户端验证以任何方式失败，也始终保护您的数据库免于错误。

客户端验证用于避免频繁的页面重新加载，提供更愉快的GUI和用户体验等。
服务器端验证用于在客户端验证失败时保护您的数据库。

你应该拥有两者，但绝对不能没有＆＃34;服务器端＆＃34;验证。 换句话说，客户端验证只是增强到服务器端验证，从不替代。

Answer 2

我用一个类似的问题撕掉我的头发超过一个小时（电子邮件领域没有得到验证）。我想我的HTML标记肯定有问题，在检查演示时，发现他们使用输入类型=“电子邮件”来捕获输入。我正在使用常规文本输入。做出改变解决了我的问题。

jquery验证插件 - 未在提交时验证

2 个答案: