当提交按钮在表单之外时，如何使用Bootstrap 3表单验证？ [英] How do I use Bootstrap 3 form validation when submit button is outside the form?

问题描述

我对表单验证的Bootstrap 3实现感到困惑。我是Bootstrap的新手，我似乎无法使用不包含提交按钮的表单进行表单验证。
使用此代码可以看到我正在寻找的表单验证类型：

I'm confused with the Bootstrap 3 implementation of form validation. I'm new to Bootstrap, and I cannot seem to get the form validation working with a form that does not include a submit button. The type of form validation I'm looking for can be seen with this code:

http://jsfiddle.net/hTPY7/1107/

<form>
    <div class="form-group">
        <label class="control-label" for="username">Email:</label>
        <div class="input-group">
            <input class="form-control" placeholder="Email" name="email" type="email" required />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="password">Password:</label>
        <div class="input-group">
            <input class="form-control" type="password" placeholder="Password" name="lastname" type="text" required />
        </div>
    </div>

        <button type="submit" class="btn btn-primary">Submit</button>
</form>

我知道我可以像下面的代码那样用一些JQuery提交表单，但我怎么能用Bootstrap 3验证？

I know I can submit the form with some JQuery like the code below, but how can I use the Bootstrap 3 validation?

$( "#createUserSubmit" ).click(function() {
  $( "#newUserForm" ).submit();
});

我多年来一直在阅读Stackoverflow，但这是我的第一篇文章。我一直在寻找答案，但我能找到的只是使用其他验证库的解决方案。我想使用Bootstrap自己的内置函数。

I've been reading Stackoverflow for years, but this is my first post. I have looked around for answers, but all I can find are solutions which use other validation libraries. I would like to use Bootstrap's own built in functions.

谢谢！

推荐答案

我做了一些研究，现在我知道我看到的表单验证不是Bootstrap的功能，而是一个新的CSS3 / HTML5功能。除非提交按钮包含在表单中，否则我认为不可能（没有JS）执行此表单验证。以下是不起作用的示例：

I have done some research, and I now know that the form validation I was seeing was not a function of Bootstrap but a new CSS3 / HTML5 feature. I don't believe it is possible (without JS) to perform this form validation unless the submit button is enclosed within the form. Here is an example of what was not working:

http://jsfiddle.net/hTPY7/1112/

以下是一个如何修复的示例：

Here's an example of how it was fixed:

http://jsfiddle.net/hTPY7/1113/

< form> 元素不仅需要包围表单，还需要包围Bootstrap模式div。

The <form> element needs to surround more than just the form, but also surround the Bootstrap modal divs.

这是另一篇很好地总结我的问题的帖子：

Here is another post which summarizes my problem well:

用于AJAX按钮提交的HTML5表单验证

这篇关于当提交按钮在表单之外时，如何使用Bootstrap 3表单验证？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！