twitter-bootstrap Bootstrap 表单输入：防止提交，但允许输入检查
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24333752/
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 form input: prevent submit, but allow for input checking
提问by Aroll605
I've got the following problem: I use bootstrap form to take input from users, and I use jQuery preventDefault() to disable the submit button from sending the form (I use AJAX instead). However, that function also prevents input checking that is done by bootstrap. For example, if someone enters an e-mail without '@' into
我有以下问题：我使用引导程序表单从用户那里获取输入，我使用 jQuery preventDefault() 禁用提交按钮发送表单（我使用 AJAX）。但是，该函数还可以防止由引导程序完成的输入检查。例如，如果有人将不带“@”的电子邮件输入到
<input type="email" class="form-control">
bootstrap would, upon clicking submit, check that input and return a popup with an error.
bootstrap 会在单击提交时检查该输入并返回一个带有错误的弹出窗口。
My question is: how to prevent the request being sent while keeping the bootstrap form checking mechanism intact?
我的问题是：如何在保持引导表单检查机制完整的同时防止发送请求？
What I have tried: using preventDefault() and writing my own checking script, however this seems like reinventing the wheel and having extra code when it's not needed.
我尝试过的：使用 preventDefault() 并编写我自己的检查脚本，但这似乎是在重新发明轮子并在不需要时使用额外的代码。
Thank you!
谢谢！
回答by Ed Fryed
I believe you are talking about the native HTML5 form validation and not validation by bootstrap its self, I have never come across bootstrap validation before. (i may be wrong though).
我相信您在谈论原生 HTML5 表单验证，而不是通过引导程序本身进行验证，我以前从未遇到过引导程序验证。（虽然我可能是错的）。
Most new browsers will validate <input type='email'/>as an email address and <input type='text' required='required'/>as required on form submission.
大多数新浏览器将验证<input type='email'/>为电子邮件地址，并<input type='text' required='required'/>根据提交表单的要求进行验证。
If for example you are using e.preventDefault();on the click event on the submit button the form will never attempt to submit and hence the native validation will never happen.
例如，如果您e.preventDefault();在提交按钮上使用单击事件，则表单将永远不会尝试提交，因此本机验证将永远不会发生。
If you want to keep the validation you need to use e.preventDefault();on the submit event of the form not the click event on the button.
如果你想保持验证，你需要e.preventDefault();在表单的提交事件上使用而不是按钮上的点击事件。
The html...
html...
<form action='' method='post'>
<input type='email' name='email' required='required' placeholder='email'/>
<button type='submit'>Submit</button>
</form>
The jQuery...
jQuery...
//this will stop the click on the button and will not trigger validation as the submit event will never be triggered
$("button").on('click',function(e){
e.preventDefault();
//ajax code here
});
//this will stop the submit of the form but allow the native HTML5 validation (which is what i believe you are after)
$("form").on('submit',function(e){
e.preventDefault();
//ajax code here
});
Anyway hope this helps. If I have misunderstood in any way let me know and ill try to assist further.
无论如何希望这会有所帮助。如果我以任何方式误解了，请告诉我，并尝试进一步提供帮助。
回答by Ronald Valera Santana
I had the same issue, I came to use "stopPropagation" as the way to stop the form submission. But after a little reading on jQuery 3, I realized that "preventDefault" was enough to what I wanted.
我遇到了同样的问题，我开始使用“stopPropagation”作为停止表单提交的方式。但是在对 jQuery 3 进行了一些阅读之后，我意识到“preventDefault”足以满足我的要求。
This caused the form validation to happen and the submit event didn't proceed.
这导致表单验证发生并且提交事件没有继续。
(This example is of an attempt i had on my own).
（这个例子是我自己尝试的）。
$('form').on("submit",function( event ) {
if ( $('#id_inputBox_username').val().length == 0 &&
$('#id_inputBox_password').val().length == 0 ) {
event.preventDefault();
$('#id_inputBox_username').tooltip('show');
$('#id_inputBox_password').tooltip('show');
} else if ( $('#id_inputBox_username').val().length == 0 ) {
event.stopPropagation();
$('#id_inputBox_username').tooltip('show');
} else if ( $('#id_inputBox_password').val().length == 0 ) {
event.stopPropagation();
$('#id_inputBox_password').tooltip('show');
}
});
回答by andrems
I had the same problem and I find this solution:
我遇到了同样的问题，我找到了这个解决方案：
$('#formulario').on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
e.preventDefault(); //prevent submit
$(".imprimir").show();
$(".informacao").fadeOut();
carregardados();
}
})
