JQuery Validation: Изменение правил Динамически

Question

У меня есть один вид, что, в зависимости от того, какая кнопка радио щелкнул (Войти или Регистрация) отображает либо:

• адрес электронной почты
• пароль

или:

• имя
• возраст
• адрес электронной почты
• пароль

При нажатии на кнопку радио переключает видимость полей Войти/Регистрация:

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

Я использую jQuery Validation plug-in, и я хотел бы используйте следующие правила:

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

Как я могу добавить правильное правило проверки динамически на основе :

$("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. Я что-то упускаю?

Answer 1

Ahh проверка плагин, всегда так сложно :(

Во-первых, я добавил идентификатор атрибутов для всех полей ввода Затем я сделал функцию изменения для вас:.

$("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 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/

EDIT: Для меня, не-интуитивной части является то, что я не вижу простой способа добавить/удалить правила для всей формы после вызова validate, вместо этого вы должны манипулировать отдельные элементы формы ,

Answer 2

Существует возможность теперь игнорировать поля базы по критериям селектора, такие как невидимый или отключен, так что вам не придется изменить набор правил:

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

Answer 3

Или вы можете использовать зависит Недвижимость.

http://jqueryvalidation.org/category/plugin/ поиск зависит

Пример: Определяет контактный элемент, как требуется, и как адрес электронной почты, последний в зависимости от флажка проверки на контакт по электронной почте.

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

Answer 4

Если вы хотите позвонить еще раз подтвердить с новыми параметрами (правила, сообщения ... и т.д.) вызова

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

Это удалит валидацию формы затем инициализировать его снова с новым настройки

Answer 5

Посмотрите на мой ответ 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(); 

}); 

Answer 6

попробовать это ..

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

кредит от here.

Answer 7

Отслеживать объект проверки и удалять/заменять правила напрямую. Работы для меня с 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 8

ниже код работает великолепно ...

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

Answer 9

Это сообщение от лет назад, но так как это было просмотрено много раз, я думаю, было бы полезно сказать, что плагин jQuery Validation теперь позволяет нам читать, добавлять и удалять правила.

Некоторые примеры:

1. Распечатать все правила привязаны к #myField: console.log($('#myField').rules());

2. Удалить ненужную правило: $('#myField').rules('remove', 'min');

3. Добавить новое правило: $('myField').rules('add', {min: 10});

Скажите, если вы хотите динамически обновлять минимальное требуемое значение. Вы можете назвать remove и add сразу после:

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

Более подробную информацию можно найти здесь: https://jqueryvalidation.org/category/plugin/#-rules()

Answer 10

У меня была аналогичная проблема, и решить ее путем добавления класса «requiredForLogin» всем логину текстовые поля и класс «requiredForSignUp» для всех текстовых полей регистрации.

Затем использовали jQuery toggleClass и addClassRules jQuery.validate для включения и выключения правил в зависимости от того, какая кнопка была нажата.

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

});