सवाल jQuery सत्यापन - दो फ़ील्ड, केवल एक को भरने की आवश्यकता है


मैं इसका उपयोग कर रहा हूँ jQuery सत्यापन प्लगइन मेरे रूप में मेरे रूप में मेरे पास 'टेलीफोन' फ़ील्ड और 'मोबाइल नंबर' है। खेत।

मैं इसे बनाने के बारे में कैसे जाउंगा ताकि उपयोगकर्ता को उनमें से एक भरना पड़े, लेकिन यह क्षेत्र हो सकता है?


44
2017-11-15 14:26


मूल


मुझे लगता है कि एक भरने के बाद आपको नियम हटाने के लिए एक रास्ता खोजना होगा, और यदि वे मान हटाते हैं, तो फिर से वापस आएं, और दूसरे फ़ील्ड में टाइप करें। यह गतिशील रूप से आपकी सत्यापन स्क्रिप्ट बना देगा। यह एक साधारण समाधान की तरह लगता है जैसे यह सरल jQuery के साथ काम करेगा, न कि सत्यापन पुस्तकालय। - Michael C. Gates
के संभावित डुप्लिकेट jQuery मान्य - एक समूह में कम से कम एक फ़ील्ड भरने की आवश्यकता है - saluce


जवाब:


ऐसा लगता है कि आपको क्या उपयोग करने की आवश्यकता है निर्भरता-कॉलबैक

यह आपको क्या करने की अनुमति देगा:

दिए गए कॉलबैक के परिणाम के आधार पर आवश्यक तत्व बनाता है।

फिर आप एक रख सकते हैं required दो टेलीफोन फ़ील्ड पर सत्यापन नियम जो केवल फ़ंक्शन कॉलबैक से वापसी के आधार पर आवश्यक होगा; इस प्रकार आप टेलीफ़ोन फ़ील्ड पर नियम डाल सकते हैं कि यह नियम केवल तभी होगा जब मोबाइल फ़ील्ड रिक्त हो और मोबाइल क्षेत्र के विपरीत।

यह अनचाहे है लेकिन सिद्धांत में

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

संभावित अद्यतन उत्तरों के लिए टिप्पणियां / अन्य उत्तरों की जांच करना सुनिश्चित करें।


55
2017-11-15 14:39



ऐसा करने का एक आसान तरीका है (अब): required: "#mobile:empty" - saluce
मेरे पास एक समान आवश्यकता है सिवाय इसके कि मुझे फॉर्म में प्रत्येक फ़ील्ड के आगे एक त्रुटि संदेश के विपरीत फ़ॉर्म के शीर्ष (या नीचे) पर दिखाने के लिए केवल एक सामान्य संदेश की आवश्यकता है। उद्धृत उदाहरण में, यदि दोनों फ़ील्ड खाली हैं, तो मुझे प्रत्येक फ़ील्ड के बगल में एक ही त्रुटि संदेश दिखाई देगा जो अनावश्यक है। कम से कम मेरी स्थिति के लिए, मुझे कुछ चाहिए जैसे "कम से कम एक फ़ील्ड भरना चाहिए।" फॉर्म के शीर्ष पर। - Web User
Textarea तत्वों पर इसका उपयोग करने में एक समस्या है। :empty एक textarea के लिए सच होगा। सामान्य रूप में, :empty सत्यापन के लिए उपयोग करना बुरा है, आपको विकल्पों की तलाश करनी चाहिए। - Milimetric
@ मिलिमेट्रिक: सहमत हैं। उपयोग करने का प्रयास करें :filled या :blank दस्तावेज़ीकरण के अनुसार: jqueryvalidation.org/documentation। - cartbeforehorse
किसी अन्य प्लगइन का उपयोग करने के लिए अब और आवश्यकता नहीं है, कृपया अन्य उत्तरों देखें। बीटीडब्ल्यू: लिंक मर चुका है। - Adam


मुझे लगता है कि ऐसा करने का सही तरीका "require_from_group" विधि का उपयोग कर रहा है।

आप जांच सकते हैं http://jqueryvalidation.org/require_from_group-method/

उदाहरण बिल्कुल वही है जो आप खोज रहे हैं:

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

अतिरिक्त विधियों को शामिल करना अनिवार्य है। जेएस


39
2018-03-10 00:15



यह विधि बेहतर काम करती है। संदेश स्पष्ट है और जैसे ही आप समूहबद्ध फ़ील्ड के अंदर टाइप करते हैं, त्रुटियां साफ़ हो जाती हैं। ध्यान दें कि आपको अतिरिक्त-विधियों .js को शामिल करने की आवश्यकता है - jalogar
यह स्वीकार्य जवाब होना चाहिए! यह एपीआई का उपयोग करने के लिए सबसे आसान और आसान है। - Ryan R.
स्वीकार्य उत्तर के रूप में वोट दिया गया क्योंकि यह सबसे उपयोगी है और एक पुनर्निर्मित व्हील समाधान की बजाय प्लगइन की अंतर्निहित सुविधा का उपयोग करता है। - Phil Cook
@ फिलकुक बस थोड़ा सा एफवाईआई हालांकि यह आपकी पोस्ट से 6 महीने की तरह है ... एसओ का उपयोग करते समय और इन टिप्पणियों को छोड़कर टिप्पणियां छोड़कर कुछ "स्वीकृत" उत्तर होना चाहिए, जैसे "वाई वाई वाई-एमएम-डीडी वर्तमान एपीआई दस्तावेज के आधार पर इस स्थिति को संभालने का यह सही तरीका होगा "। आपको मूल प्रश्न का एहसास होना चाहिए कि इस उत्तर को पोस्ट करने के लगभग 4 साल पहले और अधिक संभावना है कि तब से कुछ स्थितियों को संभालने के तरीके में बहुत कुछ बदल गया है। - Jeff Wilbert
यह मेरे लिए पूरी तरह से काम किया। शामिल करना न भूलें additional-methods.min.js या आपको एक त्रुटि मिलेगी - Hammad Khan


यहां एक ही जवाब की तलाश में आया था। उपर्युक्त पोस्ट बहुत उपयोगी पाया। धन्यवाद।

मैंने यह समाधान यह जांचने के लिए बढ़ाया है कि अन्य फ़ील्ड वास्तव में "खाली नहीं" की बजाय वैध है या नहीं। यह सुनिश्चित करता है कि उपयोगकर्ता मोबाइल फ़ील्ड से "आवश्यक" कक्षा को हटाने से पहले एक वैध फोन नंबर इनपुट करता है और इसके विपरीत।

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

26
2017-12-19 01:09



यह सबसे अच्छा जवाब है, आईएमओ। दूसरों ने अभी मेरे लिए काम नहीं किया। - Allen Gingrich
हाँ यह सही जवाब होना चाहिए - Magnum


आवश्यकता है या तो सी या (ए और बी) की आवश्यकता है सत्यापन की आवश्यकता है। मेरे लिए काम की बात यह है:

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





मुझे परेशानी थी .is(':empty') तो यहां मेरे कामकाजी विकल्प उदाहरण हैं।

पहले:

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

सभी क्षेत्रों थे की आवश्यकता है। लेकिन मैं 'या' बनाने के लिए ईमेल और / या फोन चाहता था:

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."
}

और आप देखेंगे कि मैंने जोड़ा है messages उपयोगकर्ता को कुछ सार्थक जानकारी देने का विकल्प क्योंकि डिफ़ॉल्ट संदेश कहेंगे कि प्रत्येक फ़ील्ड आवश्यक है जो इस स्थिति में सत्य नहीं है।


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



कुछ स्पष्टीकरण उपयोगी हो सकता है :) - spijs


इससे चल जाएगा

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

0
2018-03-11 14:30