jQuery मान्य आवश्यक चयन करें

Question

मैं jQuery Validate plugin का उपयोग करके html select element को मान्य करने का प्रयास कर रहा हूँ। मैंने "आवश्यक" नियम को सही पर सेट किया है, लेकिन यह हमेशा सत्यापन से गुजरता है क्योंकि शून्य सूचकांक डिफ़ॉल्ट रूप से धोखा होता है। क्या खाली मूल्य को परिभाषित करने का कोई तरीका है जो आवश्यक नियम द्वारा उपयोग किया जाता है?

युपीडी। उदाहरण। कल्पना कीजिए कि हमारे पास निम्नलिखित HTML नियंत्रण है:

<select>
  <option value="default">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

मैं चाहता हूं कि मान्यकरण प्लगइन "डिफ़ॉल्ट" मान का उपयोग खाली के रूप में करें।

Comments

कोड के कुछ स्निपेट डालें ताकि हम मदद कर सकें।

— ली

संभव डुप्लिकेट: stackoverflow.com/questions/1271640/jquery-validate-select-box

— cregox

Answer 1

आप अपना नियम लिख सकते हैं!

 // add the rule here
 $.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg !== value;
 }, "Value must not equal arg.");

 // configure your validation
 $("form").validate({
  rules: {
   SelectName: { valueNotEquals: "default" }
  },
  messages: {
   SelectName: { valueNotEquals: "Please select an item!" }
  }  
 });

Comments

आप मूल्य के बजाय चयनित पाठ का परीक्षण कर सकते हैं, जैसे:$.validator.addMethod("valueNotEquals", function(value, element, arg){ return return arg != jQuery(element).find('option:selected').text(); }, "Value must not equal arg.");

— पाब्लो एसजी पचेको

भविष्य के पाठकों की मदद करने के लिए: जहाँ SelectName कहते हैं, इसका अर्थ है कि नाम विशेषता का मूल्य और आईडी विशेषता का मूल्य नहीं है। जेएस में काम करने के बाद से यह थोड़ा भ्रामक है क्योंकि आमतौर पर आईडी के साथ काम होता है और नाम नहीं। यहाँ दस्तावेज़ीकरण देखें : "नियम (डिफ़ॉल्ट: नियम मार्कअप (कक्षाएं, विशेषताएँ, डेटा) से पढ़े जाते हैं) प्रकार: ऑब्जेक्ट कुंजी / मान जोड़े कस्टम नियमों को परिभाषित करते हैं। कुंजी एक तत्व का नाम है"

— Dror

Answer 2

एक आसान समाधान यहां दिया गया है: चयन बॉक्स को मान्य करें

मान रिक्त करें और आवश्यक विशेषता जोड़ें

<select id="select" class="required">
<option value="">Choose an option</option> 
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

Comments

लेकिन आपको अपने विकल्प को एक खाली मूल्य देना होगा - हमेशा संभव नहीं है या बेकार नहीं है

— Muleskinner

यह स्वीकृत उत्तर नहीं होना चाहिए क्योंकि मूल पोस्टर विशेष रूप से "नियमों" का उपयोग करने के लिए कह रहा है जो कि एक विकल्प है जो मान्य निर्माता को खिलाया जाता है, और मार्कअप में मौजूद नहीं है। कभी-कभी आपके पास मार्कअप को संशोधित करने की लक्जरी नहीं होती है। (और व्यक्तिगत रूप से, मैं सिर्फ मार्कअप में तर्क नहीं रखना पसंद करता हूं।)

— मेसन हाउटज़

@MasonHoutz यह मार्कअप में अभी भी तर्क है, चाहे तर्क मूल्य = "" या मूल्य = "डिफ़ॉल्ट" की उम्मीद करता है

— बिलरीचर्स

Answer 3

सबसे सरल उपाय

खाली स्ट्रिंग के लिए पहले विकल्प का मान निर्धारित करें value=""

<option value="">Choose...</option>

और jquery सत्यापन required नियम will work

Answer 4

मिनट नियम का उपयोग करें

पहला विकल्प मान 0 पर सेट करें

'selectName':{min:1}

Comments

पहला मूल्य तय किया गया है (इस मूल्य के खिलाफ कुछ बैकएंड लॉजिक है)

— साइबेरियनग्यूई

Answer 5

आपको केवल validate[required]इस चयन के वर्ग के रूप में रखना होगा और फिर मूल्य = "" के साथ एक विकल्प रखना होगा।

उदाहरण के लिए:

<select class="validate[required]">
  <option value="">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

Answer 6

मुझे नहीं पता कि सवाल (2010) पूछे जाने के समय प्लगइन कैसे था, लेकिन मैंने आज उसी समस्या का सामना किया और इसे इस तरह हल किया:

1. अपने चुनिंदा टैग को एक नाम विशेषता दें। उदाहरण के लिए इस मामले में

   <select name="myselect">

2. टैग विकल्प में विशेषता मान = "डिफ़ॉल्ट" के साथ काम करने के बजाय, एंड्रयू कोट द्वारा सुझाए गए अनुसार डिफ़ॉल्ट विकल्प या मान सेट करें ""।

   <option disabled="disabled">Choose...</option>

   या

   <option value="">Choose...</option>

3. प्लगइन सत्यापन नियम सेट करें

   $( "#YOUR_FORM_ID" ).validate({ rules: { myselect: { required: true } } });

   या

   <select name="myselect" class="required">

अवलोकन: एंड्रयू कोट का समाधान केवल तभी काम करता है जब आपके पास अपने फॉर्म में सिर्फ एक का चयन हो। यदि आप चाहते हैं कि उसका समाधान एक से अधिक के साथ काम करने के लिए आपके चयन में एक नाम विशेषता जोड़ें।

आशा करता हूँ की ये काम करेगा! :)

Comments

संक्षेप में, जोड़ने requiredके लिए विशेषता <select>टैग और जोड़ने के disabledपहले करने के लिए विशेषता <option>टैग (या के साथ एक selectedविशेषता अगर वहाँ एक है)

— स्टीफन

Answer 7

यहाँ सरल और समझने योग्य उदाहरण है:

   <select class="design" id="sel" name="subject">
        <option value="0">- Please Select -</option>
        <option value="1"> Example1 </option>
        <option value="2"> Example2 </option>
        <option value="3"> Example3 </option>
        <option value="4"> Example4 </option>
   </select>

    <label class="error" id="select_error" style="color:#FC2727"><b> Warning : You have to Select One Item.</b></label><td>

    <input type="submit" name="sub" value="Gönder" class="">

JQuery:

jQuery(function() {  

jQuery('.error').hide(); // Hide Warning Label. 

jQuery("input[name=sub]").on("click", function() {

   var returnvalue;

   if(jQuery("select[name=subject]").val() == 0) {

        jQuery("label#select_error").show(); // show Warning 
        jQuery("select#sel").focus();  // Focus the select box      
        returnvalue=false;   

}

return returnvalue;

});
      });  // you can change jQuery with $

Answer 8

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

 <form id="myform"> 
       <select class="form-control" name="user_type">
        <option value="">Select</option>
        <option value="2">1</option>
        <option value="3">2</option>
        </select>
       </form>


<script>
  $('#myform').validate({ // initialize the plugin
            rules: {
          user_type:{ required: true},
         }
      });
</script>

चयनित मान रिक्त होगा

Comments

हालांकि यह कोड स्निपेट प्रश्न को हल कर सकता है, जिसमें स्पष्टीकरण सहित वास्तव में आपकी पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है। कृपया अपने कोड को व्याख्यात्मक टिप्पणियों के साथ भीड़ देने की कोशिश न करें, इससे कोड और स्पष्टीकरण दोनों की पठनीयता कम हो जाती है!

— फाइलन

Answer 9

यह सरल है, आपको चयन फ़ील्ड मान प्राप्त करने की आवश्यकता है और यह "डिफ़ॉल्ट" नहीं हो सकता है।

if($('select').val()=='default'){
    alert('Please, choose an option');
    return false;
}

Answer 10

समाधान @JMP ने उल्लेख किया एक छोटे संशोधन के साथ मेरे मामले में काम किया: मैं का उपयोग element.valueकरने के बजाय valueमें addmethod।

$.validator.addMethod("valueNotEquals", function(value, element, arg){
    // I use element.value instead value here, value parameter was always null
    return arg != element.value; 
}, "Value must not equal arg.");

// configure your validation
$("form").validate({
    rules: {
        SelectName: { valueNotEquals: "0" }
    },
    messages: {
        SelectName: { valueNotEquals: "Please select an item!" }
    }  
});

यह संभव हो सकता है, कि मेरे पास यहां एक विशेष मामला है, लेकिन कारण को ट्रैक नहीं किया। लेकिन @ JMP का समाधान नियमित मामलों में काम करना चाहिए।

Answer 11

"गुण" का चयन कैसे मान्य करें, इसके 3 विकल्प हैं

$(document).ready(function(){

    $('.validateForm').validate({
        rules: {
            fullname: 'required',
            ragionesociale: 'required',
            partitaiva: 'required',
            recapitotelefonico: 'required',
            qualifica: 'required',
            email: {
                required: true,
                email: true
            },
        },
        submitHandler: function(form) {

            var fullname = $('#fullname').val(),
                            ragionesociale = $('#ragionesociale').val(),
                            partitaiva = $('#partitaiva').val(),
                            email = $('#email').val(),
                            recapitotelefonico = $('#recapitotelefonico').val(),
                            qualifica = $('#qualifica').val(),
                            dataString = 'fullname=' + fullname + '&ragionesociale=' + ragionesociale + '&partitaiva=' + partitaiva + '&email=' + email + '&recapitotelefonico=' + recapitotelefonico + '&qualifica=' + qualifica;

            $.ajax({
                type: "POST",
                url: "util/sender.php",
                data: dataString,
                success: function() {

                    window.location.replace("./thank-you-page.php");


                }
            });
            return false;
        }
    });

});

Comments

ढेर अतिप्रवाह में आपका स्वागत है! इस कोड स्निपेट के लिए धन्यवाद, जो कुछ सीमित अल्पकालिक सहायता प्रदान कर सकता है। एक उचित व्याख्या यह दर्शाती है कि यह समस्या का एक अच्छा समाधान क्यों है, यह दिखाते हुए इसके दीर्घकालिक मूल्य में बहुत सुधार करेगा , और यह भविष्य के पाठकों को अन्य, समान प्रश्नों के साथ और अधिक उपयोगी बना देगा। कृपया कुछ स्पष्टीकरण जोड़ने के लिए अपने उत्तर को संपादित करें, जिसमें आपके द्वारा की गई धारणाएँ शामिल हैं।

— टोबे स्पाइट