jquery validation valid() 始终 returns true 并且未创建表单的 novalidate="novalidate" 属性

Question

我正在使用 Jörn Zaefferer 的 jquery.validate v1.14.0

<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

我有一个所有验证工作正常的项目。当未填充必填字段时，客户端验证会在提交表单之前将其拾取。

但是我将所有这些表单移动到 boostrap 模态，并且页面的表单通过 ajax 调用在模态中动态加载。在此更改之后，我的客户端验证从未触发，我还注意到验证插件没有像以前那样将标签 novalidate="novalidate" 添加到表单中。

这是我的简化代码

然后我使用以下 jquery 因为我想捕获所有表单提交并做一些额外的逻辑：

   $(document).on('submit', '.formDetail', function (e) { 

        e.preventDefault();

        //added this to see if it would throw error but it doesn't
        var form = $(".formDetail");
        form.validate();

         //this is always true
         if ($(this).valid()) {


            $.ajax({
                processData: false,
                contentType: false,
                data: new FormData(this),
                type: $(this).attr('method'),
                url: $(this).attr('action'),
                success: function (data) {
                   //other logic
                 }
            }); 
         }
    });

如果 String1 留空并且我提交并单步执行 javascript 控制台 '($(this).valid())' 总是 true。如果我将其更改为 ($(".formDetail").valid())，结果是相同的，即总是 true。

它也不会像我切换到动态 ajax 模式表单之前那样在 HTTP POST 之前在屏幕上显示错误消息。

如何让 valid() 工作。单步执行代码时，我的控制台中没有 javascript 错误，并且 valid() 始终为真，这让我不知道是什么原因导致验证始终成功。如果未找到 jquery 验证插件，我肯定会收到 javascript 控制台错误，但我没有。

我尝试手动将 novalidate=novalidate 标签添加到表单中，但这并不 help.I 认为没有填充的事实告诉我有什么地方不对。您可以在我的代码中看到我确实尝试强制 validate() 但这没有什么不同。

Answer 1

I tried manually adding the novalidate=novalidate tag to the form but this doesn't help. I think the fact that this doesn't get populated tells me something is not right.

novalidate 属性只是关闭浏览器内置的 HTML5 验证；它与使插件工作无关。当正确初始化 jQuery Validate 插件时动态添加此属性，这样您就没有 HTML5 验证和 jQuery Validate。尝试手动 add/remove novalidate 将不会影响 jQuery 验证插件的运行。

这都是错的...

$(".formDetail").submit(function (e) {

    e.preventDefault();

    var form = $(".formDetail");
    form.validate();

     if ($(this).valid()) {

        $.ajax({ ....

.validate()方法是插件初始化的方式。换句话说，您不会在 submit 或 click 处理程序中初始化它。插件会自动捕获提交的点击，因此您只需将 .validate() 方法包含在 DOM 就绪处理程序中。
.valid()方法仅在插件初始化后有效。

As per documentation，任何用于提交表单的 ajax 都会进入 submitHandler 回调函数。

$(document).ready(function() {

    $(".formDetail").validate({
        submitHandler: function(form) { // fires only when form is valid
            // your ajax here
            $.ajax({ .... });
            return false;
        }
    });

    if ($(".formDetail").valid()) { 
        // this will work now, but you probably wouldn't need it anymore
        // since your ajax is is placed where it belongs.
    });

    ....

请参阅 the Tag Wiki page 了解基本设置和用法。

I moved all these forms to bootstrap modals and a page's form gets loaded dynamically inside the modal via an ajax call.

jQuery 验证插件只能在这些表单存在于 DOM.

之后初始化

Create/Load 中的表格 DOM.
Attach/Call .validate() 在表格上。
表单已准备好自动验证数据输入。

注意:

如果您还使用 Microsoft 的 Unobtrusive Validation 插件，则会自动构造和调用 .validate() 方法，并根据内联 HTML 属性声明规则。由于 .validate() 方法由 Unobtrusive Validation 插件处理，因此您不能再次调用 .validate()，因为这些后续调用总是被忽略。

Answer 2

试试这个

$(document).on('submit', '.formDetail', function (e) { 
    e.preventDefault();
    $(this).removeData("validator").removeData("unobtrusiveValidation");//remove the form validation
    $.validator.unobtrusive.parse($(this));//add the form validation

    if ($(this).valid()) {
        $.ajax({
            processData: false,
            contentType: false,
            data: new FormData(this),
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            success: function (data) {
               //other logic
             }
        }); 
     }
});

jquery validation valid() 始终 returns true 并且未创建表单的 novalidate="novalidate" 属性

jquery validation valid() always returns true and form's novalidate="novalidate" property is not created

ajax

jquery

jquery-validate

unobtrusive-validation

bootstrap-modal