如何基于jQuery表单验证显示html的一部分
大家好，我正在使用jQuery进行表单验证，我已经完成了表单验证，现在我想显示基于验证的html内容部分。i、 e在我的代码中有两个表单如何基于jQuery表单验证显示html的一部分,jquery,forms,validation,show-hide,Jquery,Forms,Validation,Show Hide,大家好，我正在使用jQuery进行表单验证，我已经完成了表单验证，现在我想显示基于验证的html内容部分。i、 e在我的代码中有两个表单content1和content2，我在每个表单的末尾都提供了一个提交按钮，现在我需要显示第二个表单，即content2，只有在第一个表单content1完全经过验证的情况下，我才能这样做。非常感谢：） 这是我的密码 BootstrapValidator 验证 第一内容 用户名 国家 --选择一个国家-- 法国 德国 意大利 日本 俄罗斯 大不列颠联合王国
content1content2content2content1
BootstrapValidator
验证
第一内容
用户名
国家
--选择一个国家--
法国
德国
意大利
日本
俄罗斯
大不列颠联合王国
美国
接受条款和政策
提交
第二内容
电子邮件地址
网站
美国电话号码
英国电话号码
十六进制，RGB，HSL，关键字颜色
五颜六色
美国邮政编码
密码
验证登陆密码
年代
提交
$（文档）.ready（函数（）{
$（'#defaultForm1'）。bootstrapValidator({
消息：“此值无效”，
反馈图标：{
有效：“glyphicon glyphicon ok”，
无效：“glyphicon glyphicon删除”，
正在验证：“glyphicon glyphicon刷新”
},
字段：{
用户名：{
消息：“用户名无效”，
验证器：{
注意：{
消息：“用户名是必需的，不能为空”
},
弦长：{
民:6,，
最高：30，
消息：“用户名长度必须大于6个字符且小于30个字符”
},
regexp:{
regexp://^[a-zA-Z0-9\.]+$/,，
消息：“用户名只能由字母、数字、点和下划线组成”
}
}
},
国家：{
验证器：{
注意：{
消息：“国家/地区为必填项，不能为空”
}
}
},
接受条款：{
验证器：{
注意：{
信息：“你没有
<!DOCTYPE html>
<html>
<head>
<title>BootstrapValidator</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="page-header">
<h1>Validate </h1>
</div>
<!-- form: -->
<section id="content1">
<div class="col-lg-8 col-lg-offset-2" >
<form id="defaultForm1" method="post" class="form-horizontal" >
<fieldset>
<legend>1st Content</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Username</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Country</label>
<div class="col-lg-5">
<select class="form-control" name="country">
<option value="">-- Select a country --</option>
<option value="fr">France</option>
<option value="de">Germany</option>
<option value="it">Italy</option>
<option value="jp">Japan</option>
<option value="ru">Russia</option>
<option value="gb">United Kingdom</option>
<option value="us">United State</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-5 col-lg-offset-3">
<div class="checkbox">
<input type="checkbox" name="acceptTerms" /> Accept the terms and policies
</div>
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary" value ="a1" >Submit</button>
</div>
</div>
</form>
</div>
</section>
<section id="content2">
<div class="col-lg-8 col-lg-offset-2" >
<form id="defaultForm2" method="post" class="form-horizontal">
<fieldset>
<legend>2nd content</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Email address</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Website</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="website" placeholder="http://" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">US Phone number</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="phoneNumberUS" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">UK Phone number</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="phoneNumberUK" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Hex, RGB, HSL, Keyword color</label>
<div class="col-lg-3">
<input type="text" class="form-control" name="color" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">All colors</label>
<div class="col-lg-3">
<input type="text" class="form-control" name="colorAll" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">US zip code</label>
<div class="col-lg-3">
<input type="text" class="form-control" name="zipCode" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Password</label>
<div class="col-lg-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Retype password</label>
<div class="col-lg-5">
<input type="password" class="form-control" name="confirmPassword" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Ages</label>
<div class="col-lg-3">
<input type="text" class="form-control" name="ages" />
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary" value ="a2">Submit</button>
</div>
</div>
</form>
</div>
</section>
<!-- :form -->
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#defaultForm1').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
country: {
validators: {
notEmpty: {
message: 'The country is required and can\'t be empty'
}
}
},
acceptTerms: {
validators: {
notEmpty: {
message: 'You have to accept the terms and policies'
}
}
}
}
});
$('#defaultForm2').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
website: {
validators: {
uri: {
allowLocal: true,
message: 'The input is not a valid URL'
}
}
},
phoneNumberUS: {
validators: {
phone: {
message: 'The input is not a valid US phone number'
}
}
},
phoneNumberUK: {
validators: {
phone: {
message: 'The input is not a valid UK phone number',
country: 'GB'
}
}
},
color: {
validators: {
color: {
type: ['hex', 'rgb', 'hsl', 'keyword'],
message: 'Must be a valid %s color'
}
}
},
colorAll: {
validators: {
color: { }
}
},
zipCode: {
validators: {
zipCode: {
country: 'US',
message: 'The input is not a valid US zip code'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and can\'t be empty'
},
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: 'The confirm password is required and can\'t be empty'
},
identical: {
field: 'password',
message: 'The password and its confirm are not the same'
}
}
},
ages: {
validators: {
lessThan: {
value: 100,
inclusive: true,
message: 'The ages has to be less than 100'
},
greaterThan: {
value: 10,
inclusive: false,
message: 'The ages has to be greater than or equals to 10'
}
}
}
}
});
});
</script>
</body>
</html>
<script>
$(document).ready(function(){
$("#content1").show();
$("#content2").hide();
$("button").click(function() {
if ( this.value == 'a1')
{
$("#content1").hide();
$("#content2").show();
}
else if ( this.value == 'a2')
{
$("#content2").hide();
$("#content1").show();
}
});
});
</script>
$('#defaultForm2').hide();
$(document).ready(function() {
$('#defaultForm1').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
country: {
validators: {
notEmpty: {
message: 'The country is required and can\'t be empty'
}
}
},
acceptTerms: {
validators: {
notEmpty: {
message: 'You have to accept the terms and policies'
}
}
}
},
onSuccess: function(e, data) {
e.preventDefault();
$('#defaultForm2').show();
$('#defaultForm1').hide();//hide the first
}
});