在引导验证器表单中停止默认表单提交答案

【问题标题】：Stopping default form submit in Bootstrap Validator Form在引导验证器表单中停止默认表单提交
【发布时间】：2014-06-24 00:46:09
【问题描述】：

我已经多次看到这个问题，但它们似乎不适用于我的情况。

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

表格：

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

在验证表单之前如何禁用提交按钮？

【问题讨论】：

标签： javascript jquery validation jqbootstrapvalidation

【解决方案1】：

最后，我需要做的是使用 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'
              }
          }
      }
  }
});

【讨论】：

嗨，我试过它工作得很好，但是我收到了这个错误 VM299:1 Uncaught SyntaxError: Illegal return statement 你能帮帮我吗？

【解决方案2】：

你需要这样做：

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

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

});

【讨论】：

完美，只做问题需要的。不要忘记为验证器设置选项，如果你想自定义它，在文档中准备好 $('form').bootstrapValidator({optionArray})
这对我有用。感谢您的回答。

【解决方案3】：

我很少使用 jQuery，所以我的语法知识很差，而且我编写自己的验证脚本，所以我对 Bootstrap Validator 一无所知。但在 vanilla/native Javascript 中，您必须将 input type="submit" 更改为 input type="button" onclick="validateAndSend()"。然后该函数将包含提交命令。这是一个演示代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo Submit with/without validation</title>
</head>
<body>
    <form name="theForm" action="form_data_handler.php">
        <input type="text" name="firstField"><br>
        <input type="button" value="Validate and send" onclick="validateAndSend()"><br>
        <input type="submit" value="Just send">
    </form>
    <script>
        function validateAndSend() {
            if (theForm.firstField.value == '') {
                alert('The first field is a required field.');
                return false;
            }
            else
                theForm.submit();
        }
    </script>
</body>
</html>

现场演示：http://codepen.io/anon/pen/yDtab?editors=100。

【讨论】：