[英]I want to have a javascript function run only after HTML5 form input has been validated
[英]Run function after form has validated with jQuery
在这里,我有一个使用jquery的Validate()插件的脚本。
$(function() {
// Setup form validation on the #register-form element
$("#form").validate({
// Specify the validation rules
rules: {
username: {
required: true,
maxlength: 16,
minlength: 6,
remote: {
url: "../inc/check.php",
type: "post",
data: {
username: function() {
return $( "#username" ).val();
}
}
}
},
email: {
required: true,
email: true
},
password: "required",
password_again: {
equalTo: "#password",
minlength: 3,
},
agree: "required"
},
// Specify the validation error messages
messages: {
Username: "Please enter a username",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
},
});
});
然后这是表格
<section id="secOne">
<div class="well controller">
<form class="form-horizontal" id="form">
<div class="control-group">
<label class="control-label">Username: </label><input type="text" name="username" value="" placeholder="E.g Batman96" id="username" required><img id="checkimg" src=""><br><hr>
<label class="control-label">Email: </label><input type="text" name="email" id="email" placeholder="E.g joebloggs@google.com..." value="" class="form-control" required><img id="checkimg2" src=""><br><hr>
<label class="control-label">Password: </label><input type="password" name="password" id="password" value="" class="form-control" required><br><hr>
<label class="control-label">Confirm Password: </label><input type="password" name="password_again" id="password_again" value="" class="form-control" required><img id="checkimg3" src=""><br><hr>
</div>
</form>
<button class="btn btn-primary" id="step1" value="Next Step">Next Step</button>
</div>
</section>
该按钮display:none;
适用于它。
我希望在所有字段都经过验证后在此按钮上使用fadeIn()
。 我查看了submitHandler()
来执行此操作,但是在注册过程中,我有多个部分会逐渐淡入和淡出。 我只希望最后提交整个数据,在第3步,这是第1步,我需要在第2步运行相同的操作。
成功验证所有字段后,如何运行函数?
如果我正确理解,则希望对多种形式执行相同的验证。 您可以通过将验证选项保存在变量中并用其初始化两种形式来做到这一点,如下所示:
$(function() {
var validations = { // common validation options
// Specify the validation rules
rules: {
username: {
required: true,
maxlength: 16,
minlength: 6,
remote: {
url: "../inc/check.php",
type: "post",
data: {
username: function() {
return $( "#username" ).val();
}
}
}
},
email: {
required: true,
email: true
},
password: "required",
password_again: {
equalTo: "#password",
minlength: 3,
},
agree: "required"
},
// Specify the validation error messages
messages: {
Username: "Please enter a username",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
},
}
// Setup form validation on the #register-form element
$("#form").validate(validations); // setup validation for step1
$("#form1").validate(validations); // setup validation for step2
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.