Tôi đang sử dụng Plugin jQuery Validate tuyệt vời để xác thực một số biểu mẫu. Trên một biểu mẫu, tôi cần đảm bảo rằng người dùng điền vào ít nhất một trong một nhóm trường. Tôi nghĩ rằng tôi đã có một giải pháp khá hay và muốn chia sẻ nó. Vui lòng đề xuất bất kỳ cải tiến nào bạn có thể nghĩ đến.

Không tìm thấy cách tích hợp nào để thực hiện việc này, tôi đã tìm kiếm và tìm thấy phương pháp xác thực tùy chỉnh của Rebecca Murphey , rất hữu ích.

Tôi đã cải thiện điều này theo ba cách:

1. Để cho phép bạn chuyển vào một bộ chọn cho nhóm trường
2. Để cho phép bạn chỉ định số lượng nhóm đó phải được điền để xác thực vượt qua
3. Để hiển thị tất cả đầu vào trong nhóm khi vượt qua xác thực ngay sau khi một trong số chúng vượt qua xác thực. (Xem lời cảm ơn Nick Craver ở cuối.)

Vì vậy, bạn có thể nói "ít nhất X đầu vào phù hợp với bộ chọn Y phải được điền."

Kết quả cuối cùng, với đánh dấu như thế này:

<input class="productinfo" name="partnumber">
<input class="productinfo" name="description">

... là một nhóm các quy tắc như sau:

// Both these inputs input will validate if 
// at least 1 input with class 'productinfo' is filled
partnumber: {
   require_from_group: [1,".productinfo"]
  }
description: {
   require_from_group: [1,".productinfo"]
}

Mục số 3 giả định rằng bạn đang thêm một lớp .checkedthông báo lỗi của mình khi xác thực thành công. Bạn có thể làm điều này như sau, như được minh họa ở đây .

success: function(label) {  
        label.html(" ").addClass("checked"); 
}

Như trong bản trình diễn được liên kết ở trên, tôi sử dụng CSS để cung cấp cho mỗi span.errorhình ảnh X làm nền của nó, trừ khi nó có lớp .checked, trong trường hợp đó, nó sẽ nhận được hình ảnh dấu kiểm.

Đây là mã của tôi cho đến nay:

jQuery.validator.addMethod("require_from_group", function(value, element, options) {
    var numberRequired = options[0];
    var selector = options[1];
    //Look for our selector within the parent form
    var validOrNot = $(selector, element.form).filter(function() {
         // Each field is kept if it has a value
         return $(this).val();
         // Set to true if there are enough, else to false
      }).length >= numberRequired;

    // The elegent part - this element needs to check the others that match the
    // selector, but we don't want to set off a feedback loop where each element
    // has to check each other element. It would be like:
    // Element 1: "I might be valid if you're valid. Are you?"
    // Element 2: "Let's see. I might be valid if YOU'RE valid. Are you?"
    // Element 1: "Let's see. I might be valid if YOU'RE valid. Are you?"
    // ...etc, until we get a "too much recursion" error.
    //
    // So instead we
    //  1) Flag all matching elements as 'currently being validated'
    //  using jQuery's .data()
    //  2) Re-run validation on each of them. Since the others are now
    //     flagged as being in the process, they will skip this section,
    //     and therefore won't turn around and validate everything else
    //  3) Once that's done, we remove the 'currently being validated' flag
    //     from all the elements
    if(!$(element).data('being_validated')) {
    var fields = $(selector, element.form);
    fields.data('being_validated', true);
    // .valid() means "validate using all applicable rules" (which 
    // includes this one)
    fields.valid();
    fields.data('being_validated', false);
    }
    return validOrNot;
    // {0} below is the 0th item in the options field
    }, jQuery.format("Please fill out at least {0} of these fields."));

Hoan hô!

La lên

Bây giờ cho lời cảm ơn đó - ban đầu, mã của tôi chỉ ẩn thông báo lỗi một cách mù quáng trên các trường khớp khác thay vì xác thực lại chúng, có nghĩa là nếu có vấn đề khác (như 'chỉ cho phép số và bạn đã nhập chữ cái') , nó bị ẩn cho đến khi người dùng cố gắng gửi. Điều này là do tôi không biết cách tránh vòng lặp phản hồi được đề cập trong các nhận xét ở trên. Tôi biết phải có một cách, vì vậy tôi đã hỏi một câu hỏi , và Nick Craver đã khai sáng cho tôi. Cảm ơn, Nick!

Câu hỏi đã được giải quyết

Đây ban đầu là một loại câu hỏi "hãy để tôi chia sẻ điều này và xem liệu ai có thể đề xuất cải tiến". Mặc dù tôi vẫn hoan nghênh phản hồi nhưng tôi nghĩ rằng nó đã khá hoàn chỉnh vào thời điểm này. (Nó có thể ngắn hơn, nhưng tôi muốn nó dễ đọc và không nhất thiết phải súc tích.) Vì vậy, hãy cứ tận hưởng!

Cập nhật - hiện là một phần của Xác thực jQuery

Điều này chính thức được thêm vào jQuery Validation vào ngày 4/3/2012.

Đó là một giải pháp tuyệt vời Nathan. Cảm ơn rất nhiều.

Đây là một cách làm cho đoạn mã trên hoạt động, trong trường hợp ai đó gặp sự cố khi tích hợp nó, như tôi đã làm:

Mã bên trong tệp tin bổ sung-method.js :

jQuery.validator.addMethod("require_from_group", function(value, element, options) {
...// Nathan's code without any changes
}, jQuery.format("Please fill out at least {0} of these fields."));

// "filone" is the class we will use for the input elements at this example
jQuery.validator.addClassRules("fillone", {
    require_from_group: [1,".fillone"]
});

Mã bên trong tệp html :

<input id="field1" class="fillone" type="text" value="" name="field1" />
<input id="field2" class="fillone" type="text" value="" name="field2" />
<input id="field3" class="fillone" type="text" value="" name="field3" />
<input id="field4" class="fillone" type="text" value="" name="field4" />

Đừng quên bao gồm tệp tin bổ sung-method.js!

Giải pháp tốt. Tuy nhiên, tôi gặp vấn đề là các quy tắc bắt buộc khác không hoạt động. Thực thi .valid () đối với biểu mẫu đã khắc phục sự cố này cho tôi.

if(!$(element).data('being_validated')) {
  var fields = $(selector, element.form);
  fields.data('being_validated', true); 
  $(element.form).valid();
  fields.data('being_validated', false);
}

Cảm ơn sean. Điều đó đã khắc phục sự cố tôi gặp phải với mã bỏ qua các quy tắc khác.

Tôi cũng đã thực hiện một vài thay đổi để thông báo 'Vui lòng điền vào ít nhất 1 trường ..' hiển thị trong một div riêng biệt thay vì sau tất cả các trường.

đưa vào biểu mẫu xác thực script

showErrors: function(errorMap, errorList){
            $("#form_error").html("Please fill out at least 1 field before submitting.");
            this.defaultShowErrors();
        },

thêm cái này vào đâu đó trong trang

<div class="error" id="form_error"></div>

thêm vào hàm request_from_group method addMethod

 if(validOrNot){
    $("#form_error").hide();
}else{
    $("#form_error").show();
}
......
}, jQuery.format("  (!)"));

Tôi đã gửi một bản vá không bị các vấn đề mà phiên bản hiện tại mắc phải (theo đó tùy chọn "bắt buộc" ngừng hoạt động bình thường trên các trường khác, một cuộc thảo luận về các vấn đề với phiên bản hiện tại có trên github .

Ví dụ tại http://jsfiddle.net/f887W/10/

jQuery.validator.addMethod("require_from_group", function (value, element, options) {
var validator = this;
var minRequired = options[0];
var selector = options[1];
var validOrNot = jQuery(selector, element.form).filter(function () {
    return validator.elementValue(this);
}).length >= minRequired;

// remove all events in namespace require_from_group
jQuery(selector, element.form).off('.require_from_group');

//add the required events to trigger revalidation if setting is enabled in the validator
if (this.settings.onkeyup) {
    jQuery(selector, element.form).on({
        'keyup.require_from_group': function (e) {
            jQuery(selector, element.form).valid();
        }
    });
}

if (this.settings.onfocusin) {
    jQuery(selector, element.form).on({
        'focusin.require_from_group': function (e) {
            jQuery(selector, element.form).valid();
        }
    });
}

if (this.settings.click) {
    jQuery(selector, element.form).on({
        'click.require_from_group': function (e) {
            jQuery(selector, element.form).valid();
        }
    });
}

if (this.settings.onfocusout) {
    jQuery(selector, element.form).on({
        'focusout.require_from_group': function (e) {
            jQuery(selector, element.form).valid();
        }
    });
}

return validOrNot;
}, jQuery.format("Please fill at least {0} of these fields."));

Bắt đầu một tên biến bằng $ là bắt buộc trong PHP, nhưng khá lạ (IMHO) trong Javascript. Ngoài ra, tôi tin rằng bạn gọi nó là "$ module" hai lần và "module" một lần, phải không? Có vẻ như mã này không hoạt động.

Ngoài ra, tôi không chắc đó có phải là cú pháp plugin jQuery bình thường hay không, nhưng tôi có thể thêm nhận xét phía trên lệnh gọi addMethod của bạn, giải thích những gì bạn đạt được. Ngay cả với mô tả văn bản của bạn ở trên, thật khó để làm theo mã, bởi vì tôi không quen thuộc với bộ trường,: điền, giá trị, phần tử hoặc bộ chọn tham chiếu đến. Có lẽ hầu hết điều này là hiển nhiên đối với những người quen thuộc với plugin Validate, vì vậy hãy sử dụng phán đoán về lượng giải thích phù hợp.

Có lẽ bạn có thể phá vỡ một vài vars để tự ghi lại mã; giống,

var atLeastOneFilled = module.find(...).length > 0;
if (atLeastOneFilled) {
  var stillMarkedWithErrors = module.find(...).next(...).not(...);
  stillMarkedWithErrors.text("").addClass(...)

(giả sử tôi đã hiểu ý nghĩa của những đoạn mã này của bạn! :))

Tôi không chắc chính xác "mô-đun" nghĩa là gì - có tên cụ thể hơn mà bạn có thể đặt cho biến này không?

Mã đẹp, nhìn chung!

Bởi vì biểu mẫu tôi đang làm việc có một số vùng được sao chép với các đầu vào được nhóm như thế này, tôi đã chuyển một đối số bổ sung cho hàm tạo request_from_group, thay đổi chính xác một dòng trong hàm addMethod của bạn:

var commonParent = $(element).parents(options[2]);

và theo cách này, một bộ chọn, ID hoặc tên phần tử có thể được chuyển một lần:

jQuery.validator.addClassRules("reqgrp", {require_from_group: [1, ".reqgrp", 'fieldset']});

và trình xác thực sẽ chỉ giới hạn xác thực cho các phần tử có lớp đó bên trong mỗi tập trường, thay vì cố gắng đếm tất cả các phần tử được phân loại .reqgrp trong biểu mẫu.

Đây là câu trả lời của tôi về câu trả lời của Rocket Hazmat, cố gắng giải quyết vấn đề của các trường được xác định khác cũng cần được xác thực, nhưng đánh dấu tất cả các trường là hợp lệ khi điền thành công một trường.

jQuery.validator.addMethod("require_from_group", function(value, element, options){
    var numberRequired = options[0],
    selector = options[1],
    $fields = $(selector, element.form),
    validOrNot = $fields.filter(function() {
        return $(this).val();
    }).length >= numberRequired,
    validator = this;
    if(!$(element).data('being_validated')) {
        $fields.data('being_validated', true).each(function(){
            validator.valid(this);
        }).data('being_validated', false);
    }
    if (validOrNot) {
    $(selector).each(function() {
            $(this).removeClass('error');
            $('label.error[for='+$(this).attr('id')+']').remove();
        });
    }
    return validOrNot;
}, jQuery.format("Please fill out at least {0} of these fields."));

Vấn đề còn lại duy nhất với điều này bây giờ là trường hợp cạnh mà trường trống, sau đó được lấp đầy, sau đó lại trống ... trong trường hợp đó, lỗi sẽ áp dụng cho trường đơn không phải nhóm. Nhưng điều đó dường như rất khó xảy ra với bất kỳ tần suất nào và về mặt kỹ thuật nó vẫn hoạt động trong trường hợp đó.

Tôi gặp sự cố với các quy tắc khác không được kiểm tra cùng với quy tắc này, vì vậy tôi đã thay đổi:

fields.valid();

Về điều này:

var validator = this;
fields.each(function(){
   validator.valid(this);
});

Tôi cũng đã thực hiện một vài cải tiến (cá nhân) và đây là phiên bản tôi đang sử dụng:

jQuery.validator.addMethod("require_from_group", function(value, element, options){
    var numberRequired = options[0],
    selector = options[1],
    $fields = $(selector, element.form),
    validOrNot = $fields.filter(function() {
        return $(this).val();
    }).length >= numberRequired,
    validator = this;
    if(!$(element).data('being_validated')) {
        $fields.data('being_validated', true).each(function(){
            validator.valid(this);
        }).data('being_validated', false);
    }
    return validOrNot;
}, jQuery.format("Please fill out at least {0} of these fields."));

Cảm ơn, Nathan. Bạn đã tiết kiệm cho tôi rất nhiều thời gian.

Tuy nhiên, tôi phải lưu ý rằng quy tắc này chưa sẵn sàng jQuery.noConflict (). Vì vậy, người ta phải thay thế tất cả $ bằng jQuery để làm việc vớivar $j = jQuery.noConflict()

Và tôi có câu hỏi: làm thế nào tôi sẽ làm cho nó hoạt động như quy tắc tích hợp sẵn? Ví dụ: nếu tôi nhập email, thông báo "Vui lòng nhập email hợp lệ" sẽ tự động biến mất nhưng nếu tôi điền vào một trong các trường nhóm thì thông báo lỗi vẫn còn.