使用Bootstrap进行表单验证(jQuery) [英] Form Validation With Bootstrap (jQuery)
问题描述
<!DOCTYPE html>
< html>
< head>
< meta charset =utf = 8>
< meta name =viewportcontent =width = device-width,initial-scale = 1.0>
< script src =js / jquery.validate.min.js>< / script> //在线找到的脚本
< script>
$(document).ready(function(){
$('#contact-form')。validate(
{
rules:{
姓名:{
minlength:2,
必填:true
},
电子邮件:{
required:true,
email:true
},
消息:{
minlength:2,
required:true
}
},
highlight:function(element){$ b $ ($'$')$ b $,
成功:函数(元素){$ b $ ('。')。addClass('valid')
.closest('。control-group')。removeClass
}
});
}); //结束document.ready
< / script>
< / head>
< div class =hero-unit>
< h1>联络表单< / h1> < / BR>
< form method =POSTaction =contact-form-submission.phpclass =form-horizontalid =contact-form>
< div class =control-group>
< label class =control-labelfor =name>名称< / label>
< div class =controls>
< input type =textname =nameid =nameplaceholder =Your name>
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =email>电子邮件地址< / label>
< div class =controls>
< input type =textname =emailid =emailplaceholder =您的电子邮件地址>
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =subject> Subject< / label>
< div class =controls>
< select id =subjectname =subject>
< option value =service>反馈< / option>
< option value =suggestions>建议< / option>
< option value =support>问题< / option>
< option value =other>其他< / option>
< / select>
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =message> Message< / label>
< div class =controls>
< / div>
< / div>
< div class =form-actions>
< input type =hiddenname =savevalue =contact>
< button type =submitclass =btn btn-success>提交消息< / button>
< button type =resetclass =btn>取消< / button>
< / div>
< / form>
< / div>
< script src =http://code.jquery.com/jquery-1.10.2.min.js>< / script>
< script src =js / bootstrap.js>< / script>
< / body>
我在jsFiddle上设置了代码,尝试诊断问题。
但是,我似乎没有遇到您的问题。
您可以看看并告诉我们吗?
HTML
< div class =hero-unit>
< h1>联络表单< / h1>
< / br>
< form method =POSTaction =contact-form-submission.phpclass =form-horizontalid =contact-form>
< div class =control-group>
< label class =control-labelfor =name>名称< / label>
< div class =controls>
< input type =textname =nameid =nameplaceholder =Your name>
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =email>电子邮件地址< / label>
< div class =controls>
< input type =textname =emailid =emailplaceholder =您的电子邮件地址>
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =subject> Subject< / label>
< div class =controls>
< select id =subjectname =subject>
< option value =service>反馈< / option>
< option value =suggestions>建议< / option>
< option value =support>问题< / option>
< option value =other>其他< / option>
< / select>
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =message> Message< / label>
< div class =controls>
< / div>
< / div>
< div class =form-actions>
< input type =hiddenname =savevalue =contact>
< button type =submitclass =btn btn-success>提交消息< / button>
< button type =resetclass =btn>取消< / button>
< / div>
< / form>
(b) 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. I had your code setup on jsFiddle to try diagnose the problem. However, I don't seem to encounter your issue.
Could you take a look and let us know? HTML Javascript
这篇关于使用Bootstrap进行表单验证(jQuery)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
$ b $ $ $ $ $'$'$($#$)$($#$) -form')。validate({
rules:{
name:{
minlength:2,
required:true
},
email:{
必填:true,
电子邮件:true
},
消息:{
minlength:2,
required:true
}
$,b $ b highlight:function(element){
$(element).closest('。control-group')。removeClass('success')。addClass('error'); $ b ('。')。addClass('valid')
.closest('。control-group')。 removeClass('error')。addClass('success');
}
});
});
<!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>
<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>
$(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');
}
});
});