Saya menggunakan Plugin jQuery Validate yang sangat baik untuk memvalidasi beberapa formulir. Pada satu formulir, saya perlu memastikan bahwa pengguna mengisi setidaknya satu dari sekelompok bidang. Saya rasa saya punya solusi yang cukup bagus, dan ingin membagikannya. Harap sarankan perbaikan apa pun yang dapat Anda pikirkan.

Karena tidak menemukan cara bawaan untuk melakukan ini, saya mencari dan menemukan metode validasi khusus Rebecca Murphey , yang sangat membantu.

Saya meningkatkan ini dengan tiga cara:

1. Untuk membiarkan Anda meneruskan pemilih untuk grup bidang
2. Untuk membiarkan Anda menentukan berapa banyak dari grup itu yang harus diisi agar validasi lulus
3. Untuk menampilkan semua input dalam grup sebagai lolos validasi segera setelah salah satunya lolos validasi. (Lihat teriakan untuk Nick Craver di bagian akhir.)

Jadi bisa dibilang "setidaknya X masukan yang cocok dengan pemilih Y harus diisi."

Hasil akhirnya, dengan markup seperti ini:

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

... adalah sekelompok aturan seperti ini:

// 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"]
}

Item # 3 mengasumsikan bahwa Anda menambahkan kelas .checkedke pesan kesalahan Anda setelah validasi berhasil. Anda dapat melakukan ini sebagai berikut, seperti yang ditunjukkan di sini .

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

Seperti pada demo yang ditautkan di atas, saya menggunakan CSS untuk memberikan setiap span.errorgambar X sebagai latar belakangnya, kecuali jika ia memiliki kelasnya.checked , dalam hal ini gambar itu mendapat gambar tanda centang.

Inilah kode saya sejauh ini:

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."));

Hore!

Teriak

Sekarang untuk teriakan itu - awalnya, kode saya hanya secara membabi buta menyembunyikan pesan kesalahan di bidang lain yang cocok alih-alih memvalidasinya ulang, yang berarti bahwa jika ada masalah lain (seperti 'hanya angka yang diizinkan dan Anda memasukkan huruf') , itu disembunyikan sampai pengguna mencoba mengirim. Ini karena saya tidak tahu bagaimana menghindari loop umpan balik yang disebutkan dalam komentar di atas. Saya tahu pasti ada jalan, jadi saya mengajukan pertanyaan , dan Nick Craver mencerahkan saya. Terima kasih, Nick!

Pertanyaan Terselesaikan

Ini awalnya adalah pertanyaan semacam "biarkan saya berbagi ini dan melihat apakah ada yang bisa menyarankan perbaikan". Meskipun saya masih menerima umpan balik, saya pikir itu cukup lengkap untuk saat ini. (Bisa lebih pendek, tapi saya ingin mudah dibaca dan belum tentu ringkas.) Jadi nikmatilah!

Perbarui - sekarang menjadi bagian dari jQuery Validation

Ini secara resmi ditambahkan ke jQuery Validation pada 4/3/2012.

Itu solusi yang sangat baik, Nathan. Terima kasih banyak.

Berikut cara membuat kode di atas berfungsi, jika seseorang mengalami masalah dalam mengintegrasikannya, seperti yang saya lakukan:

Kode di dalam file tambahan-metode.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"]
});

Kode di dalam file 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" />

Jangan lupa untuk menyertakan file tambahan-metode.js!

Solusi bagus. Namun, saya memiliki masalah aturan lain yang diperlukan tidak berfungsi. Menjalankan .valid () terhadap formulir memperbaiki masalah ini untuk saya.

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

Terima kasih sean. Itu memperbaiki masalah yang saya alami dengan kode yang mengabaikan aturan lain.

Saya juga membuat beberapa perubahan sehingga pesan 'Harap isi setidaknya 1 bidang ..' muncul di div terpisah, bukan setelah semua bidang.

masukkan ke dalam bentuk skrip validasi

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

tambahkan ini di suatu tempat di halaman

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

tambahkan ke fungsi addMethod metode require_from_group

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

Saya telah mengirimkan tambalan yang tidak mengalami masalah yang terjadi pada versi saat ini (di mana opsi "diperlukan" berhenti berfungsi dengan baik di bidang lain, diskusi tentang masalah dengan versi saat ini ada di github .

Contoh di 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."));

Memulai nama variabel dengan $ diperlukan dalam PHP, tetapi cukup aneh (IMHO) dalam Javascript. Juga, saya yakin Anda menyebutnya sebagai "$ module" dua kali dan "module" sekali, bukan? Tampaknya kode ini seharusnya tidak berfungsi.

Juga, saya tidak yakin apakah itu sintaks plugin jQuery normal, tetapi saya mungkin menambahkan komentar di atas panggilan addMethod Anda, menjelaskan apa yang Anda capai. Bahkan dengan deskripsi teks Anda di atas, sulit untuk mengikuti kode, karena saya tidak paham dengan apa yang dimaksud fieldset,: terisi, nilai, elemen, atau selektor. Mungkin sebagian besar dari ini jelas bagi seseorang yang akrab dengan plugin Validasi, jadi gunakan penilaian tentang berapa jumlah penjelasan yang tepat.

Mungkin Anda bisa membuat beberapa vars untuk mendokumentasikan sendiri kode tersebut; Suka,

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

(dengan asumsi saya benar-benar mengerti arti dari potongan kode Anda ini! :))

Saya tidak begitu yakin apa artinya "modul", sebenarnya - apakah ada nama yang lebih spesifik yang dapat Anda berikan untuk variabel ini?

Kode yang bagus, secara keseluruhan!

Karena formulir yang saya kerjakan memiliki beberapa daerah kloning dengan masukan yang dikelompokkan seperti ini, saya memberikan argumen tambahan ke konstruktor require_from_group, mengubah tepat satu baris fungsi addMethod Anda:

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

dan dengan cara ini pemilih, ID, atau nama elemen dapat diberikan satu kali:

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

dan validator akan membatasi validasi ke elemen dengan kelas itu hanya di dalam setiap fieldset, daripada mencoba menghitung semua elemen yang digolongkan .reqgrp di formulir.

Inilah retakan saya pada jawaban Rocket Hazmat, mencoba menyelesaikan masalah bidang lain yang ditentukan juga perlu divalidasi, tetapi menandai semua bidang sebagai valid pada pengisian yang berhasil.

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."));

Satu-satunya masalah yang tersisa dengan ini sekarang adalah kasus tepi di mana bidang tersebut kosong, lalu diisi, lalu kosongkan lagi ... dalam hal ini kesalahan akan diterapkan ke bidang tunggal bukan grup. Tetapi tampaknya sangat tidak mungkin terjadi dengan frekuensi apa pun dan secara teknis masih berfungsi dalam kasus itu.

Saya mengalami masalah dengan aturan lain yang tidak diperiksa sehubungan dengan ini, jadi saya mengubah:

fields.valid();

Untuk ini:

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

Saya juga membuat beberapa peningkatan (pribadi), dan ini adalah versi yang saya gunakan:

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."));

Terima kasih, Nathan. Anda menghemat banyak waktu.

Namun, saya harus memperhatikan bahwa aturan ini belum siap jQuery.noConflict (). Jadi, seseorang harus mengganti semua $ dengan jQuery untuk bekerja, katakanlah,var $j = jQuery.noConflict()

Dan saya punya pertanyaan: bagaimana saya membuatnya berperilaku seperti aturan bawaan? Misalnya, jika saya memasukkan email, pesan "Harap masukkan email yang valid" menghilang secara otomatis tetapi jika saya mengisi salah satu kolom grup pesan kesalahan tetap ada.