Soru jQuery Doğrulama - Yalnızca bir alanı doldurmak için gerekli iki alan


Kullanıyorum jQuery Doğrulama Eklentisi formumda. Formumda bir 'Telefon' alanı ve bir 'Mobil No.' var. alan.

Kullanıcıya bunlardan birini doldurmak zorunda kalacak şekilde nasıl yapmaya çalışırdım, ama bu alan olabilir mi?


44
2017-11-15 14:26


Menşei


Biri doldurulduktan sonra bir kuralı kaldırmanın bir yolunu bulmanız gerektiğini düşünüyorum ve değeri kaldırırlarsa tekrar ikinci alana yazınız. Bu, doğrulama komut dosyanızı dinamik olarak oluşturur. Böyle basit bir çözüm gibi görünüyor basit jQuery ile çalışacak ve doğrulama kütüphanesi değil. - Michael C. Gates
olası kopyası jQuery Doğrulama - doldurulacak bir grupta en az bir alan gerektirir - saluce


Cevaplar:


Bu, kullanmanız gereken şeylere benziyor bağımlılık-geri arama

Bunun yapmanıza izin vereceği şey:

Verilen geri bildirimin sonucuna bağlı olarak gerekli unsuru yapar.

Daha sonra bir required iki telefon alanındaki doğrulama kuralı, yalnızca fonksiyon geriçağırımından elde edilen geri dönüşe bağlı olarak gerekli olacaktır; böylece bu kuralı yalnızca mobil alan boşsa ve mobil alanın tersi için gerekliyse söylemek için telefon alanına bir kural koyabilirsiniz.

Bu test edilmemiş ama teoride

rules: {
    telephone: {
        required: function(element) {
            return $("#mobile").is(':empty');
        }
    },
    mobile: {
        required: function(element) {
            return $("#telephone").is(':empty');
        }
    }
}

Olası güncellenmiş cevaplar için yorumları / diğer cevapları kontrol ettiğinizden emin olun.


55
2017-11-15 14:39



Bunu yapmanın daha basit bir yolu var: required: "#mobile:empty" - saluce
Ben formdaki her alanın yanında bir hata mesajının aksine formun en üstünde (veya altında) görünmesi için yalnızca bir genel iletiye ihtiyacım dışında benzer bir gereksinime sahibim. Alıntı yapılan örnekte, her iki alan boşsa, her alanın arkasında bulunan aynı hata mesajını göreceğim. En azından benim durumum için, "En az bir alan doldurulmalı" gibi bir şeye ihtiyacım var. formun üstünde. - Web User
Bunu textarea elemanlarında kullanmanın bir problemi var. :empty Bir textarea için doğru olacaktır. Genel olarak, :empty Doğrulama için kullanmak kötüdür, alternatifler aramalısınız. - Milimetric
@Milimetric: Kabul et. Kullanmayı deneyin :filled veya :blank belgelere göre: jqueryvalidation.org/documentation. - cartbeforehorse
Başka bir eklentiyi kullanmanıza artık gerek yok, lütfen diğer cevaplara bakın. Btw: bağlantı öldü. - Adam


Bunu yapmak için doğru yolu "require_from_group" yöntemini kullanmak olduğunu düşünüyorum.

Üzerinde checkit yapabilirsiniz http://jqueryvalidation.org/require_from_group-method/

Örnek tam olarak aradığınız şey:

<input class="left phone-group" id="mobile_phone" name="mobile_phone">
<input class="left phone-group" id="home_phone" name="home_phone">
<input class="left phone-group" id="work_phone" name="work_phone">

<script>
$( "#form" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, ".phone-group"]
    },
    home_phone: {
      require_from_group: [1, ".phone-group"]
    },
    work_phone: {
      require_from_group: [1, ".phone-group"]
    }
  }
});
</script>

Additional-methods.js eklemek zorunludur


39
2018-03-10 00:15



Bu yöntem daha iyi çalışır. Mesaj daha nettir ve gruplandırılmış alanların birisini yazdığınızda hatalar temizlenir. Ek-methods.js dosyasını eklemeniz gerektiğine dikkat edin - jalogar
Bu kabul edilen cevap olmalı! Bu api parçasıdır ve kullanımı en kolay. - Ryan R.
Kabul edilen cevap olarak oy verildi, çünkü bu en yararlı ve eklentinin yeniden yapılandırılmış bir tekerlek çözümü yerine yerleşik özelliğini kullanıyor. - Phil Cook
@PhilCook Sadece küçük bir FYI, bu sizin yazılarınızdan 6 ay gibi olsa bile, SO kullanırken ve böyle yorumların bırakılması gibi şeyler söylemek, "kabul edilen" cevabın, "YYYY-AA-GG’nin Bu durumun şu anki api dokümantasyonuna göre ele alınması için doğru yol olacaktır ". Asıl sorunun, bu cevabın yayınlanmasından yaklaşık 4 yıl önce olduğunu ve o zamandan bu yana belirli durumların üstesinden gelmek için çok şey değiştiğinin farkına varmalısınız. - Jeff Wilbert
Bu benim için mükemmel çalıştı. Dahil etmeyi unutmayın additional-methods.min.js ya da bir hata alacaksınız - Hammad Khan


Aynı cevapları aramak için buraya geldim. Yukarıdaki yazıyı çok yararlı buldum. Teşekkürler.

Diğer alanın aslında "boş değil" yerine, geçerli olup olmadığını kontrol etmek için bu çözümü genişletdim. Bu, kullanıcının "gerekli" sınıfı Mobil alandan çıkarmadan önce geçerli bir Telefon Numarası girmesini ve tersini sağlar.

Mobile: {
    required: function(element) {
    return (!$("#Phone").hasClass('valid'));
    }
},
Phone: {
    required: function(element) {
        return (!$("#Mobile").hasClass('valid'));
    }
}

26
2017-12-19 01:09



Bu en iyi cevap, IMO. Diğerleri benim için çalışmadı. - Allen Gingrich
Evet bu doğru cevap olmalı - Magnum


Gereksinim, Doğrulama'nın C veya (A ve B) olması gerektiğidir. Benim için çalıştığım şey:

$.validator.addMethod("multipeFieldValidator", function(value) { 
    var returnVal = false; 
    if($("#Cfield").val() != '' || ($("#Afield").val() != '' && $("#Bfield").val() != '')) {
        returnVal = true;
    }
    return returnVal; 
}, 'Either C or A and B is required');


$('#Afield.form-control').change(function(){
    $(this).valid();
    $("#Bfield").valid();
    $("#Cfield").valid();

});

$('#Bfield.form-control').change(function(){
    $(this).valid();
    $("#Afield").valid();
    $("#Cfield").valid();
});

$('#Cfield.form-control').change(function(){
    $(this).valid();
    $("#Bfield").valid();
    $("#Afield").valid();
});


within rules I have 
Afield: "multipeFieldValidator",
Bfield: "multipeFieldValidator",
Cfield: "multipeFieldValidator" 

2
2017-07-21 02:24





Sıkıntılarım vardı .is(':empty') işte benim çalışma seçenekleri örneğim.

Önce:

rules: {
   name:       {required: true},
   email:      {required: true},
   phone:      {required: true}
}

Tüm alanlar idi gereklidir. Ama ben 'veya' oluşturmak için e-posta ve / veya telefon istedim:

rules: {
   name:       {required: true},
   email:      {required: 
                    function() {
                        //returns true if phone is empty   
                        return !$("#phone").val();
                    }
               },
   phone:      {required:
                    function() {
                        //returns true if email is empty
                        return !$("#email").val();
                     }
               }
},
messages: {
   email: "Email is required if no phone number is given.",
   phone: "A phone number is required if no phone email is given."
}

Ve ben ekledim göreceksiniz messages Kullanıcıya bazı anlamlı bilgiler verme seçeneği, çünkü varsayılan mesajlar, her bir alanın bu durumda doğru olmayan gerekli olduğunu söyler.


0
2018-01-25 06:14





$(document).ready(function () {
    jQuery.validator.addMethod("mobile10d", function (value, element) {
        return this.optional(element) || /^[7-9]{1}[0-9]{9}$/.test(value);
    }, "Please enter a valid 10 digit phone number.");
    $("#form_id").validate({
        rules: {
            mobile: {
                required: "#telephone:blank",
                mobile10d: true
            },
            telephone: {
                required: "#mobile:blank",
                mobile10d: true
            }
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form class="" action="" method="POST" id="form_id">
    <div class="col-md-4 form-group">
        <label class="form-control">Mobile<span class="required">*</span></label>
        <input class="form-control" type="text" name="mobile" id="mobile" placeholder="0-9">
    </div>
    <div class="col-md-4 form-group">
        <label class="form-control">Telephone<span class="required">*</span></label>
        <input class="form-control" type="text" name="telephone" id="telephone" placeholder="0-9">
    </div>
    <div class="form-group">
        <input type="submit" name="" value="Submit" class="apply-now-btn">
    </div>
</form>


0
2018-02-08 07:34



Bazı açıklamalar yararlı olabilir :) - spijs


Bu yapacak

Mobile: {
    required: function(element) {
    return (jQuery.isEmptyObject($("#Phone").val()));
    }
},
Phone: {
    required: function(element) {
        return (jQuery.isEmptyObject($("#Mobile").val()));
    }
}

0
2018-03-11 14:30