- 首页
- 前端开发
- 使用 Bootstrap (jQuery) 进行表单验证
使用 Bootstrap (jQuery) 进行表单验证
[英] Form Validation With Bootstrap (jQuery)
本文介绍了使用 Bootstrap (jQuery) 进行表单验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有人可以帮我处理这个代码吗?我正在为表单使用引导程序并尝试使用 jQuery 对其进行验证.不幸的是，表单验证并没有告诉我我做错了什么.我从 http://jqueryvalidation.org/documentation/ 获得了脚本，并遵循了客户端验证教程.
<头><meta charset="utf=8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="js/jquery.validate.min.js"></script>//网上找到的脚本<脚本>$(document).ready(function(){$('#contact-form').validate({规则:{姓名: {最小长度:2，要求:真实},电子邮件: {要求:真实，电子邮件:真实},信息: {最小长度:2，要求:真实}},突出显示:功能(元素){$(element).closest('.control-group').removeClass('success').addClass('error');},成功:功能(元素){元素.text('OK!').addClass('valid').closest('.control-group').removeClass('error').addClass('success');}});});//结束 document.ready<div class="hero-unit"><h1>联系方式</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="控件"><input type="text" name="name" id="name" placeholder="你的名字">
<div class="control-group"><label class="control-label" for="email">电子邮件地址</label><div class="控件"><input type="text" name="email" id="email" placeholder="您的电子邮件地址">
<div class="control-group"><label class="control-label" for="subject">Subject</label><div class="控件"><select id="subject" name="subject"><option value="na" selected="">选择一个:</option><option value="service">反馈</option><option value="suggestions">Suggestion</option><option value="support">问题</option><option value="other">其他</option></选择>
<div class="control-group"><label class="control-label" for="message">Message</label><div class="控件"><textarea name="message" id="message" rows="8" class="span5" placeholder="您要发送给我们的消息."></textarea>
<div class="form-actions"><input type="hidden" name="save" value="contact"><button type="submit" class="btn btn-success">提交消息</button><button type="reset" class="btn">取消</button>
</表单>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script src="js/bootstrap.js"></script>
解决方案
我在 jsFiddle 上设置了您的代码以尝试诊断问题.
http://jsfiddle.net/5WMff/
但是，我似乎没有遇到您的问题.你能看一下并告诉我们吗?
HTML
<h1>联系方式</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="控件"><input type="text" name="name" id="name" placeholder="你的名字">
<div class="control-group"><label class="control-label" for="email">电子邮件地址</label><div class="控件"><input type="text" name="email" id="email" placeholder="您的电子邮件地址">
<div class="control-group"><label class="control-label" for="subject">Subject</label><div class="控件"><select id="subject" name="subject"><option value="na" selected="">选择一个:</option><option value="service">反馈</option><option value="suggestions">Suggestion</option><option value="support">问题</option><option value="other">其他</option></选择>
<div class="control-group"><label class="control-label" for="message">Message</label><div class="控件"><textarea name="message" id="message" rows="8" class="span5" placeholder="您要发送给我们的消息."></textarea>
<div class="form-actions"><input type="hidden" name="save" value="contact"><button type="submit" class="btn btn-success">提交消息</button><button type="reset" class="btn">取消</button>
</表单>
Javascript
$(document).ready(function () {$('#contact-form').validate({规则:{姓名: {最小长度:2，要求:真实},电子邮件: {要求:真实，电子邮件:真实},信息: {最小长度:2，要求:真实}},突出显示:功能(元素){$(element).closest('.control-group').removeClass('success').addClass('error');},成功:功能(元素){element.text('OK!').addClass('valid').closest('.control-group').removeClass('error').addClass('success');}});});
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.
<!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>
解决方案
I had your code setup on jsFiddle to try diagnose the problem.
http://jsfiddle.net/5WMff/
However, I don't seem to encounter your issue.
Could you take a look and let us know?
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
$(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');
}
});
});
这篇关于使用 Bootstrap (jQuery) 进行表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
