Question

我正在使用JörnZaefferer的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（））'是alwasy 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
             }
        }); 
     }
});

Answer 2

我尝试手动将'AL'=>'AL'标记添加到表单中，但这没有帮助。我认为这个没有填充的事实告诉我一些事情是不对的。

novalidate=novalidate属性只是关闭浏览器的内置HTML5验证;它与使插件工作无关。在正确初始化jQuery Validate插件时动态添加此属性，这样您就不会与jQuery Validate一起进行HTML5验证。尝试手动添加/删除novalidate将不会影响jQuery Validate插件的操作。

这都错了......

novalidate

$(".formDetail").submit(function (e) { e.preventDefault(); var form = $(".formDetail"); form.validate(); if ($(this).valid()) { $.ajax({ ....方法是插件的初始化方式。换句话说，您不会在.validate()或submit处理程序内初始化它。插件会自动捕获提交的单击，因此您只需将click方法包含在DOM就绪处理程序中。
{/ 1}}方法仅在插件初始化后工作。

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

.valid()

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

我将所有这些表单移动到bootstrap模式，并且页面的表单通过ajax调用在模态内动态加载。

jQuery Validate插件只能在在中存在于DOM中后才能在这些表单上初始化。

在DOM中创建/加载表单。

在表单上附加/致电submitHandler。

表单已准备好自动验证数据输入。

注意：

如果您还使用Microsoft的Unobtrusive Validation插件，则会自动构建并调用$(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. }); ....方法，并根据内联HTML属性声明规则。由于.validate()方法由Unobtrusive Validation插件处理，因此您无法再次调用.validate()，因为这些后续调用始终被忽略。

jquery validation valid（）始终返回true，并且不创建表单的novalidate =“novalidate”属性

2 个答案: