Stopping default form submit in Bootstrap Validator Form

Question

I have seen this asked a couple of times, but they don't seem to apply in my situation.

My form is being submitted before the validation is tested.

form:

<form accept-charset="UTF-8" action="/user/fact" data-bv-submitbuttons="button[type='submit']" data-remote="true" data-toggle="validator" id="user_fact_form" method="post" role="form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
  <div class="form-group">
    <label for="key">Title</label>
    <input class="form-control" id="key" name="key" type="text" value="" />
  </div>
  <div class="form-group">
    <label for="value">Value</label>
    <input class="form-control" id="value" name="value" type="text" value="" />
  </div>
  <div class="form-group">
    <input class="btn btn-primary" disable="true" name="commit" type="submit" value="Add" />
  </div>
</form>

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'
              }
          }
      }
  }
});

Any ideas how I can disable the submit button until the form is validated?

Answer 1

In the end, what I needed to to do was disable the forms action using action="javascript:return;" and use a Jquery AJAX method to post the data:

$('#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'
              }
          }
      }
  }
});