JQuery验证单个字段集
我开发了一个具有多个字段集的表单来表示填写完整表单的步骤。 字段集通过按钮单击（每个字段集上一个）来显示和隐藏，但是我希望在显示下一个字段之前验证每个字段集。
我是JQuery的新手，并且遇到了一些麻烦。 我发现这个指南（http://encosia.com/2009/11/24/asp-net-webforms-validation-groups-with-jquery-validation/）允许我独立验证不同的字段集，但我的问题是如何做我使用该验证来控制相关字段集的显示和隐藏。
我认为这样做的方法是从每个按钮的点击事件创建一个函数，但我似乎无法正确调用验证函数。
恐怕我现在完全混淆了！ 帮帮我！！
使用jQuery验证插件，您可以通过在同一页面中使用多个表单来解决此问题。 然后你可以打电话给：
$（ '＃myFormId'）。验证（）
在当时感兴趣的形式上。
我在偶然发现你的问题之前偶然发现了这个例子，希望这会帮助有同样问题的人：
https://djaodjin.com/blog/jquery-multi-step-validation.blog.html
基本上，显然validation.js默认只验证可见的字段。
以下是完整的示例代码，点击链接查看解释：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Multiple step form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js"></script>
<style type="text/css">
#personal_information,
#company_information{
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="col-lg-5">
<form class="form-horizontal" action="" method="POST" id="myform">
<fieldset id="account_information" class="">
<legend>Account information</legend>
<div class="form-group">
<label for="username" class="col-lg-4 control-label">Username</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="username" name="username" placeholder="username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-4 control-label">Password</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="conf_password" class="col-lg-4 control-label">Confirm password</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="conf_password" name="conf_password" placeholder="Password">
</div>
</div>
<p><a class="btn btn-primary next">next</a></p>
</fieldset>
<fieldset id="company_information" class="">
<legend>Account information</legend>
<div class="form-group">
<label for="company" class="col-lg-4 control-label">Company</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="company" name="company" placeholder="Company">
</div>
</div>
<div class="form-group">
<label for="url" class="col-lg-4 control-label">Website url</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="url" name="url" placeholder="Website url">
</div>
</div>
<p><a class="btn btn-primary next">next</a></p>
</fieldset>
<fieldset id="personal_information" class="">
<legend>Personal information</legend>
<div class="form-group">
<label for="name" class="col-lg-4 control-label">Name</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-lg-4 control-label">Email</label>
<div class="col-lg-8">
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
<p><a class="btn btn-primary" id="previous" >Previous</a></p>
<p><input class="btn btn-success" type="submit" value="submit"></p>
</fieldset>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
// Custom method to validate username
$.validator.addMethod("usernameRegex", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]*$/i.test(value);
}, "Username must contain only letters, numbers");
$(".next").click(function(){
var form = $("#myform");
form.validate({
errorElement: 'span',
errorClass: 'help-block',
highlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').addClass("has-error");
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').removeClass("has-error");
},
rules: {
username: {
required: true,
usernameRegex: true,
minlength: 6,
},
password : {
required: true,
},
conf_password : {
required: true,
equalTo: '#password',
},
company:{
required: true,
},
url:{
required: true,
},
name: {
required: true,
minlength: 3,
},
email: {
required: true,
minlength: 3,
},
},
messages: {
username: {
required: "Username required",
},
password : {
required: "Password required",
},
conf_password : {
required: "Password required",
equalTo: "Password don't match",
},
name: {
required: "Name required",
},
email: {
required: "Email required",
},
}
});
if (form.valid() === true){
if ($('#account_information').is(":visible")){
current_fs = $('#account_information');
next_fs = $('#company_information');
}else if($('#company_information').is(":visible")){
current_fs = $('#company_information');
next_fs = $('#personal_information');
}
next_fs.show();
current_fs.hide();
}
});
$('#previous').click(function(){
if($('#company_information').is(":visible")){
current_fs = $('#company_information');
next_fs = $('#account_information');
}else if ($('#personal_information').is(":visible")){
current_fs = $('#personal_information');
next_fs = $('#company_information');
}
next_fs.show();
current_fs.hide();
});
});
</script>
</body>
</html>
您可以为每个字段集编写自定义验证函数，并使用.keyup函数调用它。 这里是一个例子：
HTML：
<div id="fieldset1">
<input type="text" name="fname" id="fname">
</div>
<div id="fieldset2">
<!--hidden using css-->
<input type="text" name="fname" id="fname">
</div>
使用Javascript：
$('#fieldset1 #fname').keyup(function () {
// Runs every time your keystroke is released on this input
if($(this).val() == 'Adam') {
// Checks to see if the field's value is Adam. If it is, then it shows the next fieldset. Otherwise it hides it.
$('#fieldset2').show();
} else {
$('#fieldset2').hide();
}
}
这显然意味着一个非常简单的示例，但它说明了为了验证表单并根据用户输入修改DOM，您需要执行的操作。
链接地址: http://www.djcxy.com/p/2815.html