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

Posted 2023-02-22

【中文标题】引导表单输入：防止提交，但允许输入检查

【英文标题】：Bootstrap form input: prevent submit, but allow for input checking

【发布时间】：2014-08-11 14:15:43

【问题描述】：

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

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

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

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

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

谢谢！

【问题讨论】：

你是对的，这将是重新发明***。我建议查看bootstrapvalidator.com 以帮助进行验证。它似乎处理得很好......

谢谢！然而，Bootstrap 本身已经有一些“基本”输入验证的机制。因此，如果我添加一个 jQuery 插件，我不会重新发明***，但我会添加一些可能没有必要的额外代码。我希望知道是否可以仅部分阻止提交操作：允许输入检查但阻止发送 POST 请求以提交表单。

很公平。但是，如果您要使用它，您将不再需要覆盖提交按钮。现在我刚刚离开这个话题。

通过一些浏览，似乎真正获得您所追求的唯一方法是在您的表单上使用 .submit 方法，然后进行验证，然后提交（我可以提供代码示例如果你喜欢）。就 bootstrap 为您执行此操作而言，这是通过 bootstrapvalidator.com 或 jqueryvalidation.org 之类的方式处理的...如果有什么不同，我还没有听说过...

好的，谢谢:)

【参考方案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
);

无论如何希望这会有所帮助。如果我有任何误解，请告诉我，我会尽力提供进一步帮助。

【参考方案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'); 

);

【参考方案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();
  
)

【讨论】：

您应该提供有关您在何处找到该解决方案的信息。

您的答案是关于引导验证。和这个问题无关。