当提交按钮在表单之外时，如何使用Bootstrap 3表单validation？

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

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

 
 Email: 
  
 
 
 Password: 
  
 
 Submit  

我知道我可以像下面的代码那样使用一些JQuery提交表单，但是如何使用Bootstrap 3validation呢？

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

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

谢谢！

Answer 1

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

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

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

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

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

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

AJAX按钮提交的HTML5表单validation

Answer 2

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

例：

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

HTML：

 
 
 Nome: 
 $  
 
 
 Apelido: 
 €  
 
 Submit  

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); } } });