如何根据 jQuery 表单验证显示 html 的一部分
How to display a section of html based on jQuery form validation
大家好，我正在使用 jQuery 进行表单验证，我已完成表单验证，现在我想显示基于验证的 html 内容部分。即在我的代码中有 2 个表单 content1 和 content2 ，我在每个表单的末尾都给出了一个提交按钮，现在我需要显示第二个表单，即 content2 只有当第一种形式 content1 已完全验证，我该怎么做。非常感谢:)
这是我的代码
http://codepen.io/inoxe/pen/QNGVEZ?editors=1010
<!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>
我也尝试过使用 jQuery 隐藏和显示，但它确实有效，我使用的代码是
<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>
请帮我解决这个问题，谢谢。
使用样式属性 display:block 或 display:none 而不是 hide and how 并使用 html class 属性进行初始声明。 $('selector goes here').css("display",'block');
使用 onSuccess 方法：
$('#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
}
});
http://codepen.io/anon/pen/vGZVxg?editors=1010
注意：您需要 ajax 提交第一个表单，这样页面就不会刷新或将日期移植到第二个表单提交
大家好，我正在使用 jQuery 进行表单验证，我已完成表单验证，现在我想显示基于验证的 html 内容部分。即在我的代码中有 2 个表单 content1 和 content2 ，我在每个表单的末尾都给出了一个提交按钮，现在我需要显示第二个表单，即 content2 只有当第一种形式 content1 已完全验证，我该怎么做。非常感谢:)
这是我的代码 http://codepen.io/inoxe/pen/QNGVEZ?editors=1010
<!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>
我也尝试过使用 jQuery 隐藏和显示，但它确实有效，我使用的代码是
<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>
请帮我解决这个问题，谢谢。
使用样式属性 display:block 或 display:none 而不是 hide and how 并使用 html class 属性进行初始声明。 $('selector goes here').css("display",'block');
使用 onSuccess 方法：
$('#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
}
});
http://codepen.io/anon/pen/vGZVxg?editors=1010
注意：您需要 ajax 提交第一个表单，这样页面就不会刷新或将日期移植到第二个表单提交