jquery validation valid()始终返回true,并且不创建表单的novalidate ="novalidate"属性

Question

我正在使用jquery.validate v1.14.0JörnZaefferer

<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

我尝试将novalidate=novalidate标签手动添加到表单中，但这无济于事。我认为这没有被填充的事实告诉我有些不对劲。

该novalidate属性只是关闭浏览器的内置 HTML5 验证；它与使插件工作无关。当 jQuery Validate 插件被正确初始化时，这个属性是动态添加的，这样你就没有 HTML5 验证和 jQuery Validate。尝试手动添加/删除novalidate不会影响 jQuery Validate 插件的操作。

这都错了……

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

    e.preventDefault();

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

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

        $.ajax({ ....

• 该.validate()方法是插件如何初始化。换句话说，您不会在submitorclick处理程序中初始化它。插件会自动捕获提交的点击，因此您只需将该.validate()方法包含在 DOM 就绪处理程序中。

• 该.valid()方法仅在插件初始化后才有效。

• 根据文档，用于提交表单的任何 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.
      });
  
      ....
  

请参阅Tag Wiki 页面了解基本设置和使用。

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

jQuery Validate 插件只能在这些表单存在于 DOM 中后对其进行初始化。

1. 在 DOM 中创建/加载表单。

2. .validate()在表格上附加/调用。

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

注意：

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