引导表单输入：防止提交，但允许输入检查

Question

我遇到了以下问题： 我使用引导表单从用户那里获取输入，并使用 jQuery preventDefault() 来禁用提交按钮发送表单（我使用 AJAX 代替）。但是，该功能也阻止了由引导程序完成的输入检查。例如，如果有人输入一封没有“@”的电子邮件

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

bootstrap 会在单击提交时检查该输入并返回一个带有错误的弹出窗口。

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

我尝试过：使用 preventDefault() 并编写我自己的检查脚本，但这似乎是在重新发明轮子并在不需要时添加额外的代码。

谢谢！

Answer 1

我相信您说的是原生 HTML5 表单验证，而不是通过引导程序自身进行验证，我以前从未遇到过引导程序验证。 （不过我可能错了）。

大多数新浏览器将验证<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

我遇到了同样的问题，我开始使用“stopPropagation”作为停止表单提交的方式。但是在阅读了一些 jQuery 3 之后，我意识到“preventDefault”已经足够我想要的了。

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

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

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