jquery 验证 valid() 始终返回 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() 始终为 true，这使我不知道是什么导致验证始终成功。如果没有找到 jquery 验证插件，我肯定会收到 javascript 控制台错误，但我没有。

我尝试手动将 novalidate=novalidate 标记添加到表单中，但这没有帮助。我认为这没有填充的事实告诉我有些事情是不对的。您可以在我的代码中看到我确实尝试强制 validate() 但这并没有什么区别。

Answer 1

试试这个

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