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插件允许我们读取,添加和删除规则。

一些例子:

  1. 打印附加到#myField所有规则: console.log($('#myField').rules());

  2. 删除不需要的规则: $('#myField').rules('remove', 'min');

  3. 添加一个新规则: $('myField').rules('add', {min: 10});

所以说如果你想dynamic更新所需的最小值。 您可以在以下情况下调用removeadd权限:

 // 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", ...