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

Question

我对表单验证的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自己的内置函数.

谢谢!

Answer 1

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

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

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

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

该<form>元件需要围绕不仅仅是形式多,但也围绕引导模式的div.

这是另一篇文章,它很好地总结了我的问题:

AJAX按钮提交的HTML5表单验证

Answer 2

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

例:

http://jsfiddle.net/mapb_1990/hTPY7/9/

HTML:

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

JS:

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