javascript - 当提交按钮在表单之外时,如何使用 Bootstrap 3 表单验证?

标签 javascript jquery forms validation twitter-bootstrap-3

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

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 验证?

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

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

谢谢!

最佳答案

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

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

这是一个如何修复它的例子:

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

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

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

HTML5 form validation for AJAX button submit

关于javascript - 当提交按钮在表单之外时,如何使用 Bootstrap 3 表单验证?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23595416/

相关文章:

php - 获取表单中包含 MySQL 数据的下拉列表数组

javascript - 如何使用 csv 文件显示分类的 Highcharts 图表

javascript - Youtube API、NodeJS 和 Promises 的问题

javascript - 使用 Restful 请求 JSON

javascript - 如何获取具有某个类属性的所有 HTML 元素?

javascript - 如何向 Phanes 模板添加过滤?

css - Bootstrap 3 全屏旋转木马不是横向全屏

html - 在 DJango 中调整表单元素的 CSS/html

c# - 如何在打字时将焦点设置在文本框的末尾?

javascript - 从 html 页面调用文件 jQuery 文件