form - Validación de jQuery: cambiando reglas dinámicamente

jquery validate rules

Question

Tengo un formulario único que, según el botón de opción que se haga clic (Iniciar sesión o Registro), muestra:

• dirección de correo electrónico
• contraseña

o:

• nombre
• años
• dirección de correo electrónico
• contraseña

Al hacer clic en el botón de radio, se alterna la visibilidad de los campos de inicio de sesión / registro:

<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>

Estoy usando el complemento de validación de jQuery y me gustaría usar las siguientes reglas:

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()
}
};

¿Cómo puedo agregar dinámicamente la regla de validación correcta en función de:

 $("input[name=''userAction'']").change(function() {
if ($("input[name=''userAction'']:checked" ).val() === "login") {
// use loginRules
} else {
// use signupRules
}
});

He intentado lo siguiente:

$("#myForm").validate({
rules: ($("input[name=''userAction'']:checked" ).val() === "login") ? loginRules : signupRules;
});

Pero como mis campos de inicio de sesión son los que se muestran por defecto, sus validaciones funcionan, pero el escenario de registro no; quiere validar los campos de inicio de sesión por alguna razón. ¿Me estoy perdiendo de algo?

Answer 1

Ahh plugin de validación, siempre tan complicado :(

Primero, agregué atributos de identificación a todos los cuadros de entrada. Entonces, hice una función de cambio para ti:

$("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);
}
});

Las funciones de agregar y quitar se ven así:

function addRules(rulesObj){
for (var item in rulesObj){
$(''#''+item).rules(''add'',rulesObj[item]);
}
}
function removeRules(rulesObj){
for (var item in rulesObj){
$(''#''+item).rules(''remove'');
}
}

Eso es practicamente todo. Vea aquí un ejemplo http://jsfiddle.net/ryleyb/wHpus/66/ : http://jsfiddle.net/ryleyb/wHpus/66/

EDITAR : Para mí, la parte no intuitiva es que no veo una manera fácil de agregar / eliminar reglas a todo el formulario después de que llame a validate , sino que tiene que manipular los elementos del formulario individual.

Answer 2

Ahora hay una opción para ignorar las bases de los campos en los criterios del selector, como invisible o deshabilitado, de modo que no tendría que cambiar su conjunto de reglas:

.validate({
ignore: ":not(:visible),:disabled",
...

Answer 3

Eche un vistazo a mi respuesta https://.com/a/20547836/1399001 . Incluye un jsfiddle de trabajo. En tu ejemplo será algo como esto:

$("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();
});

Answer 4

Esta publicación es de hace años, pero como se ha visto muchas veces, creo que sería útil decir que el complemento de validación jQuery ahora nos permite leer, agregar y eliminar reglas.

Algunos ejemplos:

1. Imprima todas las reglas adjuntas a #myField : #myField console.log($(''#myField'').rules());

2. Elimine una regla no deseada: $(''#myField'').rules(''remove'', ''min'');

3. Agregue una nueva regla: $(''myField'').rules(''add'', {min: 10});

Entonces, diga si desea actualizar dinámicamente el valor mínimo requerido. Puede llamar a remove y add justo después de:

// Something happened. The minimum value should now be 100
$(''#myField'').rules(''remove'', ''min'');
$(''#myField'').rules(''add'', {min: 100});

Puede encontrar más información aquí: https://jqueryvalidation.org/category/plugin/#-rules()

Answer 5

Lleve un registro del objeto de validación y elimine / reemplace las reglas directamente. Funciona para mí con 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;
}

Answer 6

O puede usar la propiedad dependiente .

http://jqueryvalidation.org/category/plugin/ buscar depende

Ejemplo: Especifica un elemento de contacto según sea necesario y como dirección de correo electrónico, este último depende de una casilla de verificación que se marca para el contacto por correo electrónico.

$(".selector").validate({
rules: {
contact: {
required: true,
email: {
depends: function(element) {
return $("#contactform_email:checked")
}
}
}
}
});

Answer 7

Si desea volver a llamar, valide con nuevas configuraciones (reglas, mensajes, etc.).

$(''#formid'').removeData(''validator'')

Esto eliminará la validación del formulario y luego lo inicializará nuevamente con la nueva configuración

Answer 8

Tuve un problema similar y lo resolví agregando una clase "requiredForLogin" a todos los cuadros de texto de inicio de sesión, y la clase "requiredForSignUp" a todos los cuadros de texto de registro.

Luego usé toggleClass de jQuery y addClassRules de jQuery.validate para activar y desactivar las reglas según el botón que se presionó.

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
}
});
});

Answer 9

el siguiente código está funcionando excelente ...

.validate({
ignore: ":not(:visible),:disabled",
...

Answer 10

prueba esto..

rules: {
address: {
required: {
depends: function(element) {
if (....){
return true;}
else{
return false;}
}
}
}
}

crédito desde here .