为什么 jQuery 验证添加 noValidate 属性？

Why is jQuery Validation adding noValidate attribute?

提问by Akira Dawson

I'm currently using:

我目前正在使用：

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="../js/bootStrap/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>

with validation such as:

带有验证，例如：

j$('.delValidate').each(function(){

j$(this).validate({
    rules:{
        delivery_Method:{
            required: true
        }
    },
    message:{
        delivery_Method:{
            required: true
        }
    }
});

});

    j$('.validateUser').each(function(){
        j$(this).validate({
            rules:{
                f_Name:{
                    required: true
                },
                l_Name:{
                    required: true  
                },
                username:{
                    required: true,
                    minlength: 6
                },
                password: {
                    validChars: true,
                    noSpace: true,
                    minlength: 6,
                    skip_or_fill_minimum: [3,".pw"]
                },
                confPass: {
                    equalTo: "#password",
                    skip_or_fill_minimum: [3,".pw"]
                }           
            }
        });
    });

HTML snippet:

HTML 片段：

<form class="form-horizontal delValidate" action="#" method="post">
<input type="hidden" name="formIdentifier" value="addDel" />
<div class="form-group">
    <div class="col-sm-3">
        <input type="text" name="delivery_Method" class="form-control" placeholder="Enter new method" />
    </div>
    <div class="col-sm-2 col-sm-offset-2">
        <button type="submit"  class="btn btn-default btn-block">Add</button>
    </div>
</div>
</form>

But when I go to my page, My form is rendered with the attribute noValidate and therefore I can insert null/empty values into the database. What is the reasoning for this? Does the form have to be set up in a particular way? Does jQuery validation pick up something is wrong and therefore doesn't work? My dirty work around is using:

但是当我转到我的页面时，我的表单使用属性 noValidate 呈现，因此我可以将空/空值插入到数据库中。这是什么原因？表格是否必须以特定方式设置？jQuery 验证是否发现错误并因此不起作用？我的肮脏工作是使用：

j$(this).removeAttr('novalidate');

回答by Sparky

The novalidateattribute simply tells the browser to disable the built-in HTML5 validation, or ignore any HTML5 validation attributes you may have used.

该novalidate属性只是告诉浏览器禁用内置的 HTML5 验证，或者忽略您可能使用过的任何 HTML5 验证属性。

The jQuery Validate plugin dynamically adds the novalidateattribute because, by installing it, you've decided to let the plugin handle validation insteadof HTML5.

jQuery Validate 插件会动态添加该novalidate属性，因为通过安装它，您已决定让插件处理验证而不是HTML5。

Neither of those two methods, JavaScript (jQuery) or HTML5, are good enough for protecting your database. You should always have some kind of server-side validation in place for when client-side validation fails, is disabled, or bypassed by the user/browser.

这两种方法，JavaScript (jQuery) 或 HTML5，都不足以保护您的数据库。 当客户端验证失败、被禁用或被用户/浏览器绕过时，您应该始终进行某种服务器端验证。

Quote OP:

引用 OP：

" My form is rendered with the attribute noValidate and therefore I can insert null/empty values into the database."

“我的表单是使用属性 noValidate 呈现的，因此我可以将空值/空值插入到数据库中。”

Sounds like something is very wrong with the way you're using the jQuery Validate plugin, and the novalidateattribute is not the root cause.

听起来您使用 jQuery Validate 插件的方式有问题，并且该novalidate属性不是根本原因。

If it's critical that you cannot enter nulldata, you'll need data validation code on the server side to prevent this. You must never rely on client-side code to protect the database since all client-side code can be easily bypassed.

如果您不能输入null数据很重要，您将需要服务器端的数据验证代码来防止这种情况发生。 您绝不能依赖客户端代码来保护数据库，因为所有客户端代码都可以轻松绕过。

"What is the reasoning for this?"

“这是什么道理？”

As explained above. This is normal and desired. The plugin simply uses novalidateto take over client side validation from the browser (HTML5).

如上所述。这是正常和需要的。该插件仅用于novalidate从浏览器 (HTML5) 接管客户端验证。

If you have no HTML5 validation attributes, then the novalidateattribute, or lack of novalidateattribute, does absolutely nothing. In other words, it only toggles the HTML5 validation if you use HTML5 validation attributes.

如果您没有 HTML5 验证属性，则该novalidate属性或缺少该属性novalidate绝对没有任何作用。换句话说，如果您使用 HTML5 验证属性，它只会切换HTML5 验证。

"Does the form have to be set up in a particular way?"

“表格必须以特定方式设置吗？”

Yes. But we cannot see your markup to tell where you went wrong.

是的。但是我们看不到您的标记来判断您哪里出错了。

"My dirty work around is using: .removeAttr('novalidate')"

“我的肮脏工作正在使用：.removeAttr('novalidate')”

This is not smart, or completely superfluous, depending on your markup. Effectively, you are potentially allowing HTML5 validation to occur simultaneously with the jQuery Validate plugin. Pick one or the other for client-side validation.

这并不聪明，或者完全是多余的，这取决于您的标记。实际上，您可能允许 HTML5 验证与 jQuery Validate 插件同时进行。选择一个或另一个进行客户端验证。

---

---

EDIT:

编辑：

The OP has since added some HTML markup to the question.

此后，OP 为该问题添加了一些 HTML 标记。

The jQuery Validate plugin is working exactly as expected: http://jsfiddle.net/tv7Bz/

jQuery Validate 插件完全按预期工作：http: //jsfiddle.net/tv7Bz/