Javascript 当提交按钮位于表单外部时，如何使用Bootstrap 3表单验证？

我对表单验证的Bootstrap3实现感到困惑。我对Bootstrap还不熟悉，而且我似乎无法对不包含提交按钮的表单进行表单验证。 我正在寻找的表单验证类型可以通过以下代码查看：

我已经阅读Stackoverflow很多年了，但这是我的第一篇文章。我四处寻找答案，但我能找到的都是使用其他验证库的解决方案。我想使用Bootstrap自己的内置函数

---

谢谢

我们需要使用某种外部库或自定义代码来添加验证规则，这将使我们能够将验证类添加到表单中。我认为没有别的办法了

例如：

HTML:

---

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

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

元素不仅需要围绕表单，还需要围绕引导模式div

下面是另一篇文章，它很好地总结了我的问题：

---

如果您接受HTML5，它的表单验证非常简单（不需要javascript）：

...
...
提交

资料来源：

---

覆盖率相当不错：

您可以添加表单的html或至少提交按钮的html吗？当然可以，我更新了这篇文章，展示了一个只使用引导库而不包括其他外部库的表单验证示例。我编辑了我的原始文章，在JSFIDLE上添加了一个变体，显示了我希望看到的引导验证类型。感谢You@user3625866向上投票，并接受它作为答案，如果它有助于你。我不能向上投票，直到我有15个声誉，但你的帖子是有帮助的。如果您查看我的编辑，您将看到一个没有外部库的表单验证示例。你知道我如何在不在表单中包含提交按钮的情况下实现该验证功能吗？@user3625866可能的解决方法是将按钮推到屏幕左侧。这样做的好处是，当CSS被禁用时，您会得到优雅的降级。但是为什么我不能使用这样的控件：其中关键字“required”告诉引导程序执行一些表单验证

<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>

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

<form>
    <div class="form-group">
        <label class="control-label" for="firstname">Nome:</label>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input class="form-control" placeholder="Insira o seu nome próprio" name="firstname" type="text" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="lastname">Apelido:</label>
        <div class="input-group">
            <span class="input-group-addon">€</span>
            <input class="form-control" placeholder="Insira o seu apelido" name="lastname" type="text" />
        </div>
    </div>

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

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

<form id="my-awesome-form">
    ...
</form>
...
<button type="submit" form="my-awesome-form">Submit</button>