使用 Bootstrap (jQuery) 进行表单验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18296267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Form Validation With Bootstrap (jQuery)
提问by user2693351
Can someone please help me with this code? I am using bootstrap for the form and trying to validate it with jQuery. Unfortunately, the form validation isn't telling me what I'm doing wrong. I got the script from http://jqueryvalidation.org/documentation/and followed a tutorial for client-sided validation.
有人可以帮我处理这个代码吗？我正在为表单使用引导程序并尝试使用 jQuery 对其进行验证。不幸的是，表单验证并没有告诉我我做错了什么。我从http://jqueryvalidation.org/documentation/获得了脚本，并遵循了客户端验证教程。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery.validate.min.js"></script> //Script found online
<script>
$(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
</script>
</head>
<div class="hero-unit">
<h1>Contact Form</h1> </br>
<form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form">
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" name="name" id="name" placeholder="Your name">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email Address</label>
<div class="controls">
<input type="text" name="email" id="email" placeholder="Your email address">
</div>
</div>
<div class="control-group">
<label class="control-label" for="subject">Subject</label>
<div class="controls">
<select id="subject" name="subject">
<option value="na" selected="">Choose One:</option>
<option value="service">Feedback</option>
<option value="suggestions">Suggestion</option>
<option value="support">Question</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="message">Message</label>
<div class="controls">
<textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea>
</div>
</div>
<div class="form-actions">
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-success">Submit Message</button>
<button type="reset" class="btn">Cancel</button>
</div>
</form>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
回答by Jayawi Perera
I had your code setup on jsFiddle to try diagnose the problem.
我在 jsFiddle 上设置了您的代码以尝试诊断问题。
However, I don't seem to encounter your issue. Could you take a look and let us know?
但是，我似乎没有遇到您的问题。你能看看并告诉我们吗？
HTML
HTML
<div class="hero-unit">
<h1>Contact Form</h1>
</br>
<form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form">
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" name="name" id="name" placeholder="Your name">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email Address</label>
<div class="controls">
<input type="text" name="email" id="email" placeholder="Your email address">
</div>
</div>
<div class="control-group">
<label class="control-label" for="subject">Subject</label>
<div class="controls">
<select id="subject" name="subject">
<option value="na" selected="">Choose One:</option>
<option value="service">Feedback</option>
<option value="suggestions">Suggestion</option>
<option value="support">Question</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="message">Message</label>
<div class="controls">
<textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea>
</div>
</div>
<div class="form-actions">
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-success">Submit Message</button>
<button type="reset" class="btn">Cancel</button>
</div>
</form>
Javascript
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');
}
});
});
回答by Mujahidul Jahid
You can get another validation on this tutorial : http://twitterbootstrap.org/bootstrap-form-validation
您可以在本教程中获得另一个验证：http: //twitterbootstrap.org/bootstrap-form-validation
They use JQuery validation.
他们使用 JQuery 验证。
jquery.validate.js
jquery.validate.min.js
jquery-1.7.1.min.js
And you'll get the source code there.
你会在那里得到源代码。
<form id="registration-form" class="form-horizontal">
<h2>Sample Registration form <small>(Fill up the forms to get register)</small></h2>
<div class="form-control-group">
<label class="control-label" for="name">Your Name</label>
<div class="controls">
<input type="text" class="input-xlarge" name="name" id="name"></div>
</div>
<div class="form-control-group">
<label class="control-label" for="name">User Name</label>
<div class="controls">
<input type="text" class="input-xlarge" name="username" id="username"></div>
</div>
<div class="form-control-group">
<label class="control-label" for="name">Password</label>
<div class="controls">
<input type="password" class="input-xlarge" name="password" id="password">
</div>
</div>
<div class="form-control-group">
<label class="control-label" for="name"> Retype Password</label>
<div class="controls">
<input type="password" class="input-xlarge" name="confirm_password" id="confirm_password"></div>
</div>
<div class="form-control-group">
<label class="control-label" for="email">Email Address</label>
<div class="controls">
<input type="text" class="input-xlarge" name="email" id="email"></div>
</div>
<div class="form-control-group">
<label class="control-label" for="message">Your Address</label>
<div class="controls">
<textarea class="input-xlarge" name="address" id="address" rows="3"></textarea></div>
</div>
<div class="form-control-group">
<label class="control-label" for="message"> Please agree to our policy</label>
<div class="controls">
<input id="agree" class="checkbox" type="checkbox" name="agree"></div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success btn-large">Register</button>
<button type="reset" class="btn">Cancel</button></div>
</form>
And The JQuery :
和 JQuery ：
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/jquery.validate.js"></script>
<script src="script.js"></script>
<script>
addEventListener('load', prettyPrint, false);
$(document).ready(function(){
$('pre').addClass('prettyprint linenums');
});
Here is the live example of the code: http://twitterbootstrap.org/live/bootstrap-form-validation/
这是代码的实时示例：http: //twitterbootstrap.org/live/bootstrap-form-validation/
Check the full tutorial: http://twitterbootstrap.org/bootstrap-form-validation/
查看完整教程：http: //twitterbootstrap.org/bootstrap-form-validation/
happy coding.
快乐编码。
回答by bnabriss
Check this library, it's completable with booth bootstrap 3 and bootstrap 4
检查这个库，它可以与 Bootstrap 3 和 bootstrap 4 配合使用
jQuery
jQuery
<form>
<div class="form-group">
<input class="form-control" data-validator="required|min:4|max:10">
</div>
</form>
Javascript
Javascript
$(document).on('blur', '[data-validator]', function () {
new Validator($(this));
});
回答by Zeshan Khan
Please try after removing divs from formor try to use onclick method on submit button.
请尝试从表单中删除 div 后尝试在提交按钮上使用 onclick 方法。
回答by user1079877
Here is a very simple and lightweight plugin for validation with Boostrap, you can use it if you like: https://github.com/wpic/bootstrap.validator.js
这是一个非常简单且轻量级的 Boostrap 验证插件，如果您愿意，可以使用它：https: //github.com/wpic/bootstrap.validator.js
