在Bootstrap Validator Form中停止默认表单提交 [英] Stopping default form submit in Bootstrap Validator Form
本文介绍了在Bootstrap Validator Form中停止默认表单提交的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经看过几次,但是它们似乎并不适用于我的情况。
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 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="✓" /></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:
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?
推荐答案
最后,我需要做的是使用 action =javascript:return;<来禁用表单操作/ code>并使用Jquery AJAX方法发布数据:
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'
}
}
}
}
});
这篇关于在Bootstrap Validator Form中停止默认表单提交的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文