jquery - 为什么 jQuery Validation 添加 noValidate 属性？

Question

我目前正在使用:

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

验证例如:

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 片段:

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

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

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

Answer 1

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

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

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

引用OP:

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

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

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

"What is the reasoning for this?"

如上所述。这是正常现象，也是人们所希望的。该插件仅使用 novalidate 从浏览器 (HTML5) 接管客户端验证。

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

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

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

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

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

<小时/>

编辑:

OP 此后向问题添加了一些 HTML 标记。

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