jQuery Validation: Quy định Thay đổi động

Question

Tôi có một hình thức duy nhất, tùy thuộc vào nút radio được nhấp (Đăng nhập hoặc đăng ký), hiển thị một trong hai:

• địa chỉ email
• mật khẩu

hoặc:

• tên
• tuổi
• địa chỉ email
• mật khẩu

Nhấp vào nút radio Toggles khả năng hiển thị của các trường Đăng nhập/đăng ký:

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

Tôi đang sử dụng jQuery Validation plug-in, và tôi muốn sử dụng các quy tắc sau:

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

Làm cách nào để thêm quy tắc xác thực chính xác dựa trên động :

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

Tôi đã thử những điều sau đây:

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

Nhưng kể từ khi lĩnh vực nhập của tôi là mặc định hiển thị, kiểm chứng thực của nó làm việc, nhưng kịch bản đăng ký không; nó muốn xác thực các trường Đăng nhập vì một lý do nào đó. Tui bỏ lỡ điều gì vậy?

Answer 1

Ahh xác nhận plugin, luôn luôn như vậy khó khăn :(

Đầu tiên, tôi đã thêm thuộc tính id cho tất cả các hộp đầu vào Sau đó, tôi đã thực hiện một chức năng thay đổi dành cho bạn:.

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

    } 
}); 

Các add và remove chức năng giống như thế này:.

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

function removeRules(rulesObj){ 
    for (var item in rulesObj){ 
     $('#'+item).rules('remove'); 
    } 
} 

đó là khá nhiều nó Xem ở đây cho một ví dụ làm việc: http://jsfiddle.net/ryleyb/wHpus/66/

EDIT: Đối với tôi, phần không trực quan là tôi không thấy một cách dễ dàng để thêm/xóa quy tắc cho toàn dạng sau khi bạn gọi validate, thay vào đó bạn phải thao tác các yếu tố hình thức cá nhân .

Answer 2

Có một tùy chọn hiện nay để bỏ qua lĩnh vực căn cứ trên các tiêu chí chọn, chẳng hạn như vô hình hay vô hiệu hóa, như vậy bạn sẽ không cần phải thay đổi thiết lập quy tắc của bạn:

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

Answer 3

Hoặc bạn có thể sử dụng phụ thuộc tài sản.

http://jqueryvalidation.org/category/plugin/ tìm kiếm phụ thuộc

Ví dụ: Chỉ định một yếu tố tiếp xúc theo yêu cầu và như địa chỉ email, sau này tùy thuộc vào một hộp kiểm được kiểm tra cho liên hệ qua email.

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

Answer 4

Nếu bạn muốn gọi xác nhận một lần nữa với các thiết lập mới (quy tắc, các thông điệp ... vv) gọi

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

này sẽ loại bỏ xác nhận cho các hình thức sau đó khởi tạo nó một lần nữa với các mới cài đặt

Answer 5

Hãy xem câu trả lời của tôi https://stackoverflow.com/a/20547836/1399001. Nó bao gồm một jsfiddle làm việc. Trong ví dụ của bạn sẽ được một cái gì đó như thế này:

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

thử này ..

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

tín dụng từ here.

Answer 7

Theo dõi đối tượng xác thực và xóa/thay thế quy tắc trực tiếp. Làm việc cho tôi với 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

mã dưới đây đang làm việc tuyệt vời ...

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

Answer 9

bài này là từ năm trước, nhưng kể từ khi nó đã được xem rất nhiều lần, tôi nghĩ sẽ hữu ích khi nói rằng plugin jQuery Validation giờ đây cho phép chúng ta đọc, thêm và xóa các quy tắc.

Một số ví dụ:

1. In tất cả các quy tắc gắn liền với #myField: console.log($('#myField').rules());

2. Hủy bỏ một quy tắc không mong muốn: $('#myField').rules('remove', 'min');

3. Thêm một quy tắc mới: $('myField').rules('add', {min: 10});

Vì vậy, hãy nói nếu bạn muốn cập nhật động giá trị tối thiểu bắt buộc. Bạn có thể gọi một remove và add ngay sau:

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

Thông tin thêm có thể được tìm thấy ở đây: https://jqueryvalidation.org/category/plugin/#-rules()

Answer 10

Tôi đã có một vấn đề tương tự và giải quyết nó bằng cách thêm một lớp "requiredForLogin" cho tất cả các đăng nhập hộp văn bản và lớp "requiredForSignUp" cho tất cả các hộp văn bản đăng ký.

Sau đó, sử dụng toggleClass của jQuery và addClassRules của jQuery.validate để bật và tắt các quy tắc tùy thuộc vào nút nào được nhấn.

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

});