twitter-bootstrap Bootstrap JS 验证器和表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27011984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap JS validator and form submit
提问by jacques
I am using this Bootstrap validator github.com/1000hz/bootstrap-validatorfor my bootstrap forms but it appears there is no way to set some external JS conditional before submitting forms.
我正在将这个 Bootstrap 验证器github.com/1000hz/bootstrap-validator用于我的引导程序表单，但似乎无法在提交表单之前设置一些外部 JS 条件。
For example, I would like to do the following from an external JS files:
例如，我想从外部 JS 文件中执行以下操作：
1 # if form or some input of the form is invalid using validator() then I do some action.
1 # 如果使用 validator() 时表单或表单的某些输入无效，则我执行一些操作。
2 # else Users will see some bootstrap button loading message until everything is submitted into the databases.
2 # else 用户将看到一些引导按钮加载消息，直到所有内容都提交到数据库中。
You can have a single case here:
你可以在这里有一个案例：
$('button[data-loading-text]').click(function () {
var btn = $(this);
btn.button('loading');
$.blockUI();
// #1 if form is invalid using validator() then I unblock the please wait message $.unblockUI(); and reset the bootstrap loading button.
// #2 else users will still see the "please wait" message + bootsrap loading button untill everything is submitted into the databases.
});
http://jsfiddle.net/temgo/k07nx06k/12/
http://jsfiddle.net/temgo/k07nx06k/12/
Any help will be appreciated as it appears the plugin events are only set for specific field not for full form validation.
任何帮助将不胜感激，因为看起来插件事件仅针对特定字段设置，而不是针对完整表单验证。
Regards
问候
回答by Lashus
Check out the Eventssection on 1000hz page. (http://1000hz.github.io/bootstrap-validator/#validator-events)
查看1000hz 页面上的事件部分。( http://1000hz.github.io/bootstrap-validator/#validator-events)
If you want to fire up the action before validating - just listen to the event.
如果您想在验证之前启动操作 - 只需监听事件。
$('#someFormId').on('validate.bs.validator', function(){
doSomeStuff();
});
Edit
编辑
The problem with events is that it is fired after every field. From what I know this plugin doesn't provide an event for finished successful validation.
事件的问题在于它在每个字段之后都会被触发。据我所知，这个插件不提供完成成功验证的事件。
回答by Parth Akbari
For your refhope it will help u
对于您的ref希望它会帮助您
$(document).ready(function () {
$('#contact-form').validate({
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
message: {
minlength: 2,
required: true
}
},
highlight: function (element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('Done');
}
});
});
回答by Igor Parokonnyi
$(function () {
$("#myForm").validator();
$("#myButton").click(function (e) {
var validator = $("#myForm").data("bs.validator");
validator.validate();
if (!validator.hasErrors())
{
$("myForm").submit();
} else
{
...
}
}
})
Hope with will help.
希望有帮助。
回答by Renan Coelho
I am working so much for a better coding with this form validator js plugin.
我正在努力使用此表单验证器 js 插件进行更好的编码。
Follow my code and try yourself:
按照我的代码并尝试自己：
// Select every button with type submit under a form with data-toggle validator
$('form[data-toggle="validator"] button[type="submit"]').click(function(e) {
// Select the form that has this button
var form = $(this).closest('form');
// Verify if the form is validated
if (!form.data("bs.validator").validate().hasErrors()) {
e.preventDefault();
// Here go the trick! Fire a custom event to the form
form.trigger('submitted');
} else {
console.log('Form still not valid');
}
});
// And in your separated script, do the following:
$('#contactForm').on('submitted', function() {
// do anything here...
})
Consider the following HTML code:
考虑以下 HTML 代码：
<form id="contactForm" action="/contact/send" method="POST" data-toggle="validator" role="form">
<div class="form-group has-feedback">
<label for="inputName" class="control-label">Name:</label>
<input type="text" name="inputName" id="inputName" class="form-control" data-error="Your input has an invalid value"/>
<span class="help-block with-errors"></span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Send</button>
</div>
</form>
回答by gingerkid
I came across this question looking for something else, but I have worked on precisely what you're trying to achieve.
我在寻找其他问题时遇到了这个问题，但我一直在研究您想要实现的目标。
My solution was to use the snippet of code the plugin author gives for binding to the submit button
我的解决方案是使用插件作者提供的代码片段来绑定到提交按钮
$('#form').validator().on('submit', function (e) {
if ( !e.isDefaultPrevented() ) {
// put your conditional handling here. return true if you want to submit
// return false if you do not want the form to submit
}
});
Hope that helps someone out.
希望能帮助别人。
