jquery 验证插件 - 未在提交时验证 [英] jquery validation plugin - not validating on submit

问题描述

我有一个包含多个字段的表单，其中一些我想在 keyup 和提交时进行验证.我先调用 jquery 1.9.1，然后调用插件 (1.11.1)，然后调用带有我的 js 的外部文件.我通过 Firebug 看到它们都在加载.如果我使用下面的代码，它根本不会验证 - 表单提交，我收到 mysql 错误，因为我没有填写字段.这是js代码:

I've got a form with several fields, some of which I'd like to have validated on keyup and on submit. I am calling jquery 1.9.1 then the plugin (1.11.1), then an external file with my js. I see via Firebug they are all loading. If I use the code below, it does not validate at all - the form submits, and I get mysql errors because I don't have fields filled out. Here is the js code:

    $("#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"
        }
    },
    });

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

If I add this piece of code in the beginning:

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

它在提交时验证 - 除了 cc_email 字段之外的所有内容.这永远不会得到验证.我所有的表单字段都有一个 name 属性.这似乎我一定遗漏了一些简单的东西，但我花了几个小时来查看这个，以及这个表格上的其他问答.谁能看出我错在哪里?

it validates on submit - all but the cc_email field. This never gets validated. All my form fields have a name attribute. This seems like I must be missing something simple, but I've spent hours looking at this, and other Q&A on this form. Can anyone see what I'm dong wrong?

部分 html 标记:

Part of the html markup:

<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" />

推荐答案

你有几个问题...

1. "如果我在开头添加这段代码:" $("#untForm").submit(function() {

您绝对不需要添加提交处理程序.该插件已经捕获了提交按钮的点击并自动处理所有事情.

You absolutely do not need to add a submit handler. The plugin already captures the click of the submit button and handles everything automatically.

1. 您的代码必须包含在 DOM 就绪处理程序中，以确保在您调用 .validate() 方法时表单的 HTML 标记存在.(这个省略解释了为什么在您将它包含在 submit() 处理程序中之前什么都不起作用.)

1. Your code must be enclosed within a DOM ready handler to ensure the HTML markup for the form exists when you call the .validate() method. (This omission explains why nothing was working until you enclosed it within a submit() handler.)

onfocusout 选项默认为激活.根据文档，将其设置为 true "不是有效值.(将它设置为 true 可能会破坏一些东西.)如果你想要这个选项，你必须省略 onfocusout: true 因为它已经是默认值.

The onfocusout option is activated by default. As per the documentation, setting it to true "is not a valid value". (Setting it to true can break things.) If you want this option, you must leave out onfocusout: true because it's already the default.

带有布尔参数的规则，例如required，在true参数周围不加引号.

The rules with boolean parameters, such as required, do not get quotation marks around the true parameter.

required: true

不确定为什么您在 attachment 字段上有 required: false.如果您不指定 required 规则，则该字段不是必需的(它是可选的).将其设置为 false 没有任何意义，而将其省略可实现相同的效果.

Not sure why you have required: false on the attachment field. If you don't specify the required rule, then the field is not required (it's optional). There's no purpose in setting it to false when leaving it out achieves the same.

根据您的 "jp?g,png,gif,txt" 参数，我不确定您是否打算使用 accept 规则，用于 MIME 类型.那些看起来像文件扩展名，在这种情况下，您应该使用 extension 规则 代替.如果是这种情况，它们需要用 | 字符分隔.请参阅:http://jqueryvalidation.org/extension-method/

Based on your parameters of "jp?g,png,gif,txt", I'm not sure you intended to use the accept rule, which is for MIME Types. Those look like file extensions, and in that case, you should be using the extension rule instead. If that's the case, they need to be separated with a | character. See: http://jqueryvalidation.org/extension-method/

当您使用 accept 或 extension 规则时，您必须包含 additional-methods.js 文件，以防万一.

When you use the accept or extension rules, you must include the additional-methods.js file, just in case you haven't.

不确定您所说的未验证"是什么意思；在 cc_email 字段中.你只定义了 email 规则，所以当你输入一个非电子邮件地址时，它会给你一个错误.但是，您没有指定 required 规则，因此该字段是可选的.如果您希望它是强制性的，则添加 required.

Not sure what you meant by "not validated" on the cc_email field. You've only defined the email rule so when you enter an non-email address, it will give you an error. However, you did not specify the required rule so this field will be optional. If you want it mandatory, then add required.

cc_email: {
    required: true,
    email: true
}

演示:http://jsfiddle.net/ca2​​Rd/

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

HTML 标记问题.

1. 元素不是容器，没有结束标记，也不能将其他元素放入其中.它们是独立的和自关闭的，类似于 <br/> 标签.

1. <img> elements are not containers, do not have a closing tag, and you cannot put other elements inside of them. They are stand-alone and self-closing, similar to a <br /> tag.

无效:... </img>

无效:

有效:

有效:

1. 您不需要 <textarea> 标签内的 required 属性，因为您已经在其中定义了 required 规则你的 .validate() 方法.

1. You do not need the required attribute inside of the <textarea> tag since you've already defined the required rule inside of your .validate() method.

---

引用 OP:

"...我收到 mysql 错误，因为我没有填写字段..."

这是一个非常严重的问题.JavaScript 或 jQuery 的客户端验证通常会被绕过、破坏或禁用.因此，您应该绝不依赖任何客户端代码来保护您的数据库免受错误影响.

This is a very serious problem. Client-side validation by JavaScript or jQuery, can routinely be bypassed, broken or disabled. Therefore, you should NEVER rely on any client-side code to protect your database from errors.

您的服务器端绝对必须有代码来验证传入的数据，因此即使客户端验证以任何方式失败，也能始终保护您的数据库免受错误影响.

You absolutely must have code on your server-side that also validates the incoming data and therefore will always protect your database from errors, even when the client-side validation fails in any fashion.

• 客户端验证是为了避免频繁的页面重新加载、更愉快的 GUI 和用户体验等.

• Client-side validation is for avoiding frequent page reloads, for a more pleasant GUI and user experience, etc.

服务器端验证用于在客户端验证失败时保护您的数据库.

Server-side validation is for protecting your database whenever client-side validation fails.

您应该同时拥有两者，但绝对不要没有服务器端"验证.换句话说，客户端验证只是对服务器端验证的增强，从不替代品.

这篇关于jquery 验证插件 - 未在提交时验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！