jquery - 验证不适用于 jqBootstrapValidation 和 ajax

Question

在 jQuery 中，我在引导表单上使用带有 jqBootstrapValidation 插件的 $.ajax 方法，但验证无法正常工作。我在用

$('#updatenamebutton').click(function(event)
{
   event.preventDefault();
}

preventDefault正在停止验证工作，但我不想实际提交值，所以我正在使用event.preventDefault();. 有任何想法吗？

Answer 1

您只需要将 ajax 函数放入 jqBootstrapValidation submitSuccess 回调中。

您不需要在表单上绑定“提交”或“点击”之类的触发器，因为 jqBootstrapValidation 将处理提交事件。

以下代码是不言自明的：

$(function() {

  $('form[name="contact"]').find('input,select,textarea').not('[type=submit]').jqBootstrapValidation({

    submitSuccess: function ($form, event) {

      $.ajax({
        type: 'POST',
        url: $form.attr('action'),
        data: $form.serialize(),
        success: function(data)
        { 
          // just to confirm ajax submission
          console.log('submitted successfully!');
        }
      });

      // will not trigger the default submission in favor of the ajax function
      event.preventDefault();
    }

  });

});

有关插件的更多详细信息： http ://reactiveraven.github.io/jqBootstrapValidation/

Answer 2

您必须执行以下操作：

$(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation({

    preventSubmit: false,
     submitSuccess: function (form, event) {
         event.preventDefault();
         dosubmit(form);
     },
     submitError: function (form, event, errors) {
         event.preventDefault();
         }
    }); } );