使用Bootstrap进行表单validation（jQuery）

有人可以帮我这个代码吗？ 我正在使用表单的bootstrap并尝试使用jQueryvalidation它。 不幸的是，表单validation并没有告诉我我做错了什么。 我从http://jqueryvalidation.org/documentation/获得了脚本，并遵循了客户端validation的教程。

      //Script found online  $(document).ready(function(){ $('#contact-form').validate( { rules: { name: { minlength: 2, required: true }, email: { required: true, email: true }, message: { minlength: 2, required: true } }, highlight: function(element) { $(element).closest('.control-group').removeClass('success').addClass('error'); }, success: function(element) { element .text('OK!').addClass('valid') .closest('.control-group').removeClass('error').addClass('success'); } }); }); // end document.ready   
 
Contact Form
 
 
 
 Name 
  
 
 
 Email Address 
  
 
 
 Subject 
  Choose One: Feedback Suggestion Question Other  
 
 
 Message 
  
 
 
  Submit Message Cancel 
 
 
    

Answer 1

我在jsFiddle上设置了代码来尝试诊断问题。

http://jsfiddle.net/5WMff/

但是，我似乎没有遇到你的问题。 你能看看并告诉我们吗？

HTML

 
 
Contact Form
  
 
 Name 
  
 
 
 Email Address 
  
 
 
 Subject 
  Choose One: Feedback Suggestion Question Other  
 
 
 Message 
  
 
 
  Submit Message Cancel 
  

使用Javascript

 $(document).ready(function () { $('#contact-form').validate({ rules: { name: { minlength: 2, required: true }, email: { required: true, email: true }, message: { minlength: 2, required: true } }, highlight: function (element) { $(element).closest('.control-group').removeClass('success').addClass('error'); }, success: function (element) { element.text('OK!').addClass('valid') .closest('.control-group').removeClass('error').addClass('success'); } }); }); 

Answer 2

您可以在本教程中获得另一个validation： http ： //twitterbootstrap.org/bootstrap-form-validation

他们使用JQueryvalidation。

 jquery.validate.js jquery.validate.min.js jquery-1.7.1.min.js 

你会在那里得到源代码。

  
 
Sample Registration form (Fill up the forms to get register)
 
 Your Name 
 
 
 
 User Name 
 
 
 
 Password 
  
 
 
  Retype Password 
 
 
 
 Email Address 
 
 
 
 Your Address 
 
 
 
  Please agree to our policy 
 
 
 
 Register Cancel
  

和JQuery：

以下是代码的实例： http ： //twitterbootstrap.org/live/bootstrap-form-validation/

查看完整的教程： http ： //twitterbootstrap.org/bootstrap-form-validation/

快乐的编码。

Answer 3

这是一个非常简单轻量级的Boostrapvalidation插件，如果您愿意，可以使用它： https ： //github.com/wpic/bootstrap.validator.js

Answer 4

检查这个库 ，它可以通过booth bootstrap 3和bootstrap 4完成

jQuery的

使用Javascript

 $(document).on('blur', '[data-validator]', function () { new Validator($(this)); }); 

Answer 5

请尝试从formor中删除div后尝试在提交按钮上使用onclick方法。