Bootstrap表单输入:阻止提交,但允许输入检查

Question

我有以下问题:我使用bootstrap表单从用户那里获取输入,我使用jQuery preventDefault()来禁止发送表单的提交按钮(我使用AJAX代替).但是,该函数还会阻止bootstrap执行的输入检查.例如,如果有人输入没有"@"的电子邮件

<input type="email" class="form-control">

单击提交后,bootstrap将检查该输入并返回一个错误的弹出窗口.

我的问题是:如何在保持引导程序表单检查机制完整的同时防止发送请求？

我尝试过:使用preventDefault()并编写自己的检查脚本,但这似乎重新发明轮子并在不需要时提供额外的代码.

谢谢!

Answer 1

我相信你在谈论本机HTML5表单验证而不是bootstrap自我验证,我之前从未遇到过bootstrap验证.(虽然我可能错了).

大多数新浏览器将验证<input type='email'/>为电子邮件地址,并<input type='text' required='required'/>根据表单提交进行验证.

例如,如果您正在使用e.preventDefault();提交按钮上的单击事件,则表单将永远不会尝试提交,因此本机验证将永远不会发生.

如果要保留需要e.preventDefault();在表单的提交事件上使用的验证,而不是按钮上的单击事件.

html ......

<form action='' method='post'>
   <input type='email' name='email' required='required' placeholder='email'/>
   <button type='submit'>Submit</button>
</form>

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

无论如何希望这有帮助.如果我以任何方式误解,请让我知道,并试图进一步协助.