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

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

我的表单在测试validation之前提交。

形成：

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

任何想法如何禁用提交按钮，直到表单被validation？

Answer 1

最后，我需要做的是使用action="javascript:return;"禁用表单操作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' } } } } }); 

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

Answer 3

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

现场演示： http ： //codepen.io/anon/pen/yDtab？编辑= 100 。