问

在Bootstrap Validator Form中停止默认表单提交

mobiledu2502882247 发布于 2023-01-07 20:56

char

我已经看过几次,但是它们似乎并不适用于我的情况.

我的表单在测试验证之前提交.

形成:


  
    Title
    
  
  
    Value

JavaScript的:

$('#user_fact_form').bootstrapValidator({
  live: 'enabled',
  message: 'This value is not valid',
  submitButton: '$user_fact_form button[type="submit"]',
  submitHandler: function(validator, form, submitButton) {
      $.post(form.attr('action'), form.serialize(), function (result) {
          $("#facts_tbody").append(result.data);
      });
      return false;
  },
  feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
  },
  fields: {
      key: {
          selector: '#key',
          validators: {
              notEmpty: {
                  message: 'The title is required and cannot be empty'
              }
          }
      },
      value: {
          selector: '#value',
          validators: {
              notEmpty: {
                  message: 'The value is required and cannot be empty'
              }
          }
      }
  }
});

有什么想法,我可以禁用提交按钮,直到表单被验证？

2 个回答

最后,我需要做的是禁用表单操作action="javascript:return;"并使用Jquery AJAX方法发布数据:

$('#user_fact_form').bootstrapValidator({
  live: 'enabled',
  message: 'This value is not valid',
  submitButton: '$user_fact_form button[type="submit"]',
  submitHandler: function(validator, form, submitButton) {
      $.ajax({
          type: 'POST',
          url: 'my_form.url',
          data: $(form).serialize(),
          success: function(result) {
              $("#facts_tbody").append(result);
              $("#key").val('');
              $("#value").val('');
              $("#user_fact_form").data('bootstrapValidator').resetForm();
          }
      });
      return false;
  },
  feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
  },
  fields: {
      key: {
          selector: '#key',
          validators: {
              notEmpty: {
                  message: 'The title is required and cannot be empty'
              }
          }
      },
      value: {
          selector: '#value',
          validators: {
              notEmpty: {
                  message: 'The value is required and cannot be empty'
              }
          }
      }
  }
});

2023-01-07 21:03 回答

mobiledu2502861593

你需要这样做:

$("#yourform").submit(function(ev){ev.preventDefault();});
$("#submit").on("click", function(){

   var bootstrapValidator = $("#yourform").data('bootstrapValidator');
   bootstrapValidator.validate();
   if(bootstrapValidator.isValid())
     $("#yourform").submit();
   else return;

});

2023-01-07 21:06 回答

jason2502893743

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签