为什么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/empty值插入数据库.这是什么原因？表格是否必须以特定方式设置？jQuery验证是否有问题,因此不起作用？我的肮脏工作是使用:

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

Answer 1

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

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

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

引用OP:

"我的表单使用属性noValidate进行渲染,因此我可以在数据库中插入null/empty值."

听起来像使用jQuery Validate插件的方式是非常错误的,并且novalidate属性不是根本原因.

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

"这是什么原因？"

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

如果您没有HTML5验证属性,那么novalidate属性或缺少novalidate属性绝对不会发生任何事情.换句话说,如果您使用HTML5验证属性,它只会切换HTML5验证.

"表格是否必须以特定的方式设置？"

是.但我们无法看到你的标记来告诉你哪里出错了.

"我的肮脏工作正在使用:.removeAttr('novalidate')"

根据您的标记,这不是智能的,也不是完全多余的.实际上,您可能允许HTML5验证与jQuery Validate插件同时发生.选择一个或另一个进行客户端验证.

编辑:

OP已经在问题中添加了一些HTML标记.

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