jQueryvalidation：dynamic更改规则
我有一个表单，根据单击哪个单选button（login或注册），显示以下任一情况：
- 电子邮件地址
- 密码
要么：
- 名称
- 年龄
- 电子邮件地址
- 密码
点击单选button切换login/注册字段的可见性：
<form id="myForm"> <input name="userAction" type="radio" value="login" checked="checked">Login</input> <br /> <input name="userAction" type="radio" value="signup">Sign Up</input> <div id="loginFields" style="display:none"> <!-- Login fields (email address and password) --> </div> <div id="signupFields" style="display:none"> <!-- Signup fields (name, age, email address, password) --> </div> </form> 我正在使用jQueryvalidation插件 ，我想使用以下规则：
var signupRules = { emailAddressTextBox: { required: true, email: true }, passwordTextBox: { required: true, minlength: 6, maxlength: 24, passwordValidationRule: true // custom regex added with $.validator.addMethod() } }; var loginRules = { nameTextBox: { required: true, maxlength: 50 }, loginEmailAddressTextBox: { required: true, email: true }, loginPasswordTextBox: { required: true, minlength: 6, maxlength: 24, passwordValidationRule: true // custom regex added with $.validator.addMethod() }, loginPasswordAgainTextBox: { required: true, minlength: 6, maxlength: 24, equalTo: "#loginPasswordTextBox" passwordValidationRule: true // custom regex added with $.validator.addMethod() } };
如何根据以下条件dynamic地添加正确的validation规则：
$("input[name='userAction']").change(function() { if ($("input[name='userAction']:checked" ).val() === "login") { // use loginRules } else { // use signupRules } });
我已经尝试了以下内容：
$("#myForm").validate({ rules: ($("input[name='userAction']:checked" ).val() === "login") ? loginRules : signupRules; });
但是由于我的login字段是默认显示的，它的validation工作，但注册情况不; 它想要validationlogin字段出于某种原因。 我错过了什么吗？
啊validation插件，总是这么棘手:(
首先，我添加了id属性到所有的input框。 然后，我为你做了一个改变function：
$("input[name='userAction']").change(function() { $('#signupFields').toggle(); $('#loginFields').toggle(); if ($("input[name='userAction']:checked").val() === "login") { removeRules(signupRules); addRules(loginRules); } else { removeRules(loginRules); addRules(signupRules); } });
添加和删除function如下所示：
function addRules(rulesObj){ for (var item in rulesObj){ $('#'+item).rules('add',rulesObj[item]); } } function removeRules(rulesObj){ for (var item in rulesObj){ $('#'+item).rules('remove'); } }
这是非常多的。 看到这里的工作示例： http : //jsfiddle.net/ryleyb/wHpus/66/
编辑 ：对我来说，非直观的部分是，我没有看到一个简单的方法来添加/删除规则后，您调用validate整个forms ，而不是你必须操纵个别表单元素。
或者你可以使用depends属性。
http://jqueryvalidation.org/category/plugin/search取决于;
示例：根据需要和电子邮件地址指定联系人元素，后者取决于通过电子邮件进行联系的checkbox。
$(".selector").validate({ rules: { contact: { required: true, email: { depends: function(element) { return $("#contactform_email:checked") } } } } });
如果你想用新的设置（规则，消息等）再次调用validation
$('#formid').removeData('validator')
这将删除窗体的validation，然后用新的设置重新初始化
现在有一个选项可以根据select标准来忽略字段，例如不可见或禁用，这样就不必更改规则集：
.validate({ ignore: ":not(:visible),:disabled", ...
尝试这个..
rules: { address: { required: { depends: function(element) { if (....){ return true;} else{ return false;} } } } }
从这里信贷。
这篇文章是从几年前，但由于它已被多次查看，我认为这是有益的说现在jQueryvalidation插件允许我们读取，添加和删除规则。
一些例子：
-
打印附加到
#myField所有规则：console.log($('#myField').rules()); -
删除不需要的规则：
$('#myField').rules('remove', 'min'); -
添加一个新规则：
$('myField').rules('add', {min: 10});
所以说如果你想dynamic更新所需的最小值。 您可以在以下情况下调用remove和add权限：
// Something happened. The minimum value should now be 100 $('#myField').rules('remove', 'min'); $('#myField').rules('add', {min: 100});
更多信息可以在这里find： https ： //jqueryvalidation.org/category/plugin/#-rules（）
跟踪validation对象并直接删除/replace规则。 适用于v1.13.0
var validation = $('#form1').validate(); //Keep track of validation object //Rule set 1 var validationRulesLogin = { headerEmail: { required: true, email: true }, headerPassword: "required" }; var validationMessagesLogin = { headerEmail: { required: "Please enter your email address.", email: "Not a valid email address." }, headerPassword: "Please enter your password." }; //Rule set 2 var validationRulesSignup = { signupEmail: { required: true, email: true }, signupPassword: "required", signupPassword2: { equalTo: "#phBody_txtNewPassword" } }; var validationMessagesSignup = { signupEmail: { required: "Please enter your email address.", email: "Not a valid email address." }, signupPassword: "Please enter your password.", signupPassword2: "Passwords are not the same." }; //Toggle rule sets function validatingLoginForm(){ validation.resetForm(); validation.settings.rules = validationRulesLogin; validation.settings.messages = validationMessagesLogin; } function validationSignupForm(){ validation.resetForm(); validation.settings.rules = validationRulesSignup; validation.settings.messages = validationMessagesSignup; }
看看我的回答https://stackoverflow.com/a/20547836/1399001 。 它包括一个工作jsfiddle。 在你的例子中会是这样的：
$("input[name='userAction']").change(function() { var settings = $("#myForm").validate().settings; if ($("input[name='userAction']:checked" ).val() === "login") { $.extend(settings, { rules: loginRules }); } else { $.extend(settings, { rules: signupRules }); } $("#myForm").valid(); });
我有一个类似的问题，并通过添加一个“requiredForLogin”类到所有的login文本框和“requiredForSignUp”类到所有的注册文本框来解决它。
然后使用jQuery的toggleClass和jQuery.validate的addClassRules打开和closures规则，具体取决于按下哪个button。
function EnableAllValidation() { // remove the jquery validate error class from anything currently in error // feels hackish, might be a better way to do this $(".error").not("label").removeClass("error"); // remove any the 'disabled' validation classes, // and turn on all required validation classes // (so we can subsequently remove the ones not needed) $(".requiredForLoginDisabled").toggleClass("requiredForLoginDisabled requiredForLogin"); $(".requiredForSignUpDisabled").toggleClass("requiredForSignUpDisabled requiredForSignUp"); } function EnableLoginValidation() { // reenable all validations // then disable the signUp validations EnableAllValidation(); $(".requiredForSignUp").toggleClass("requiredForSignUpDisabled requiredForSignUp"); } function EnableSignUpValidation() { // reenable all validations // then disable the login validations EnableAllValidation(); $(".requiredForLogin").toggleClass("requiredForLoginDisabled requiredForLogin"); } $(document).ready(function () { $("input[value='login']").click(function () { EnableLoginValidation(); }); $("input[value='signup']").click(function () { EnableSignUpValidation(); }); $("#myForm").validate(); jQuery.validator.addClassRules({ requiredForSignUp: { required: true }, requiredForLogin: { required: true } }); });
下面的代码工作非常棒…
.validate({ ignore: ":not(:visible),:disabled", ...
