Question

我遇到了以下问题：我使用bootstrap表单从用户那里获取输入，我使用jQuery preventDefault（）来禁止发送表单的提交按钮（我使用AJAX代替）。但是，该函数还会阻止bootstrap执行的输入检查。例如，如果有人输入的电子邮件没有＆＃39; @＆＃39;成

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

无论如何希望这会有所帮助。如果我以任何方式误解了，请告诉我，并试图进一步提供帮助。

Answer 2

我有同样的问题，我开始使用＆＃34; stopPropagation＆＃34;作为停止表单提交的方式。但是在对jQuery 3进行了一些阅读后，我意识到＆＃34; preventDefault＆＃34;足以满足我的需求。

这导致表单验证发生，并且提交事件没有继续。

（这个例子是我自己的尝试。）

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

Answer 3

我有同样的问题，我找到了这个解决方案：

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

Bootstrap表单输入：阻止提交，但允许输入检查

3 个答案: