jquery - 验证不适用于 jqBootstrapValidation 和 ajax

Question

在 jQuery 中，我在 Bootstrap 表单上使用 $.ajax 方法和 jqBootstrapValidation 插件，但验证无法正常工作。我正在使用

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

preventDefault 正在停止验证工作，但我不想实际提交值，因此我使用 event.preventDefault();。有什么想法吗？

Answer 1

只需将ajax函数放入jqBootstrapValidation的submitSuccess回调中即可。

您不需要在表单上绑定(bind)“提交”或“单击”等触发器，因为 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/