जांचें कि क्या jQuery का उपयोग करके इनपुट खाली हैं

Question

मेरे पास एक फॉर्म है जिसे मैं चाहूंगा कि सभी फ़ील्ड को भर दिया जाए। यदि किसी फ़ील्ड में क्लिक किया जाता है और फिर नहीं भरा जाता है, तो मैं एक लाल पृष्ठभूमि प्रदर्शित करना चाहूंगा।

यहाँ मेरा कोड है:

$('#apply-form input').blur(function () {
  if ($('input:text').is(":empty")) {
    $(this).parents('p').addClass('warning');
  }
});

यह फ़ील्ड भर जाने या न होने के बावजूद चेतावनी वर्ग लागू करता है।

मैं क्या गलत कर रहा हूं?

Comments

: खाली छद्म वर्ग किसी भी तत्व का प्रतिनिधित्व करता है, जिसमें कोई बच्चे नहीं हैं । केवल तत्व नोड्स और पाठ (व्हॉट्सएप सहित) पर विचार किया जाता है। टिप्पणियां या प्रसंस्करण निर्देश प्रभावित नहीं करते हैं कि कोई तत्व खाली माना जाता है या नहीं।

— Константин Ван

Answer 1

$('#apply-form input').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents('p').addClass('warning');
    }
});

और आपको जरूरी नहीं है .lengthया देखें कि क्या यह >0तब से है जब एक खाली स्ट्रिंग वैसे भी झूठी का मूल्यांकन करती है, लेकिन यदि आप पठनीय उद्देश्यों के लिए चाहते हैं:

$('#apply-form input').blur(function()
{
    if( $(this).val().length === 0 ) {
        $(this).parents('p').addClass('warning');
    }
});

यदि आप सुनिश्चित हैं कि यह हमेशा एक टेक्स्टफील्ड तत्व पर काम करेगा तो आप बस उपयोग कर सकते हैं this.value।

$('#apply-form input').blur(function()
{
      if( !this.value ) {
            $(this).parents('p').addClass('warning');
      }
});

इसके अलावा, आपको यह ध्यान रखना चाहिए कि $('input:text')कई तत्वों को पकड़ लेता है, एक संदर्भ निर्दिष्ट करें या thisयदि आप सिर्फ एक अकेला तत्व का संदर्भ चाहते हैं तो कीवर्ड का उपयोग करें (बशर्ते संदर्भ के वंशजों / बच्चों में एक टेक्स्टफील्ड हो)।

Comments

मुझे लगता है कि अगर आप इससे बदलते हैं तो यह बेहतर काम करेगा: अगर (! $ (यह) .val ()) से: if (! $ (यह) .val () && $ (यह) .val ()! = " )

— अल्फासिन

$ (यह) .val ()। लंबाई <1

— टॉमस

YourObjNameSpace.yourJqueryInputElement.keyup (function (e) {if ($ ट्रिम ($ (यह) .val।))) {// छंटनी का मूल्य सत्य है} बाकी {// छंटनी का मूल्य है falsey}}

— Frankie Loscavio

मैं खेतों की लंबाई को इतनी बार-बार सत्यापित करता हूं कि मैं पूरी तरह से अनदेखा हो .val().lengthगया था और इसके बजाय .length()तत्व पर ही उपयोग कर रहा था ।

— टैस

अधिक मजबूती के लिए, मैं अंत में .trim () भी जोड़ूंगा

— HQuser

Answer 2

हर किसी के पास सही विचार है, लेकिन मुझे थोड़ा और स्पष्ट होना और मूल्यों को ट्रिम करना पसंद है।

$('#apply-form input').blur(function() {
     if(!$.trim(this.value).length) { // zero-length string AFTER a trim
            $(this).parents('p').addClass('warning');
     }
});

यदि आप .length का उपयोग नहीं करते हैं, तो '0' की एक प्रविष्टि खराब के रूप में चिह्नित की जा सकती है, और 5 स्थानों की प्रविष्टि $ .trim के बिना ठीक के रूप में चिह्नित की जा सकती है। शुभकामनाएँ।

Comments

बिल्कुल सही। ट्रिमिंग आवश्यक है, खासकर जब बारीक WYSIWYG संपादकों (उदाहरण के लिए jWYSIWYG) का उपयोग किया जाता है।

— जोश स्मिथ

क्या मैं वैल्यू बदलने का सुझाव दे सकता हूं ---> अगर ($! ट्रिम (यह। राइट) .length) {// जीरो-लेंथ स्ट्रिंग एक ट्रिम $ (यह) .परेंट ('पी') के बाद। addClass (' चेतावनी '); }

— । किलिआन लिंडबर्ग

this.valहोगा undefinedवहाँ। इसकी आवश्यकता होगी $(this).val()- लेकिन इसके लिए कोई क्रॉस-ब्राउज़र लाभ नहीं है, इसलिए मैंने इसे संक्षिप्तता / गति के लिए छोड़ दिया।

— एलेक्स सेक्स्टन 21

Answer 3

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

$('#signupform').submit(function() {
    var errors = 0;
    $("#signupform :input").map(function(){
         if( !$(this).val() ) {
              $(this).parents('td').addClass('warning');
              errors++;
        } else if ($(this).val()) {
              $(this).parents('td').removeClass('warning');
        }   
    });
    if(errors > 0){
        $('#errorwarn').text("All fields are required");
        return false;
    }
    // do the ajax..    
});

Answer 4

if ($('input:text').val().length == 0) {
      $(this).parents('p').addClass('warning');
}

Comments

बिना पढ़ा हुआ टाइपरोर: अपरिभाषित की संपत्ति 'लंबाई' नहीं पढ़ सकता है

— चक डी

@ChuckD मैं एक ही त्रुटि हो रही थी और मैं पता लगा मैं याद आ रही थी $में if (('input:text').val().length == 0) {यह होना चाहिएif ($('input:text').val().length == 0) {

— fWd82

Answer 5

आप भी उपयोग कर सकते हैं ..

$('#apply-form input').blur(function()
{
    if( $(this).val() == '' ) {
          $(this).parents('p').addClass('warning');
    }
});

यदि आपको रिक्त स्थान के बारे में संदेह है, तो प्रयास करें ..

$('#apply-form input').blur(function()
{
    if( $(this).val().trim() == '' ) {
          $(this).parents('p').addClass('warning');
    }
});

Answer 6

कैसे किसी का उल्लेख नहीं है

$(this).filter('[value=]').addClass('warning');

मेरे लिए अधिक jquery- जैसा लगता है

Comments

यह jQuery 1.9+ में काम नहीं करता है क्योंकि वे बदल गए हैं कि चयनकर्ता फ़िल्टर कैसे काम करता है .. jsfiddle.net/6r3Rk

— विक

मेरा सुझाव है कि $ (यह) .not ('[value]')। 1.9 jsfiddle.net/znZ9e के

— Jamie Pate

मेरा मानना ​​है कि केवल परीक्षण करता है कि क्या क्षेत्र एक मूल्य विशेषता के साथ शुरू हुआ था। यह वास्तविक फॉर्म फ़ील्ड मान का परीक्षण नहीं करता है जैसे आपको सत्यापन के लिए आवश्यक होगा। jsfiddle.net/T89bS ... यदि आप इसमें कुछ टाइप करते हैं, तो बिना किसी मूल्य विशेषता के फ़ील्ड को सामन के साथ थप्पड़ मारा जाता है।

— विक

Answer 7

कीप इवेंट का पता लगाएगा कि क्या उपयोगकर्ता ने बॉक्स को साफ कर दिया है (यानी बैकस्पेस ईवेंट उठाता है लेकिन बैकस्पेस IE में कीपर इवेंट को नहीं बढ़ाता है)

    $("#inputname").keyup(function() {

if (!this.value) {
    alert('The box is empty');
}});

Answer 8

इसके बजाय jQuery सत्यापन प्लगइन का उपयोग करने पर विचार करें । यह साधारण आवश्यक क्षेत्रों के लिए थोड़ा ओवरकिल हो सकता है, लेकिन यह काफी परिपक्व है कि यह उन किनारे के मामलों को संभालता है जो आपने अभी तक नहीं सोचा है (न ही हम में से कोई भी तब तक जब तक हम उनमें भाग नहीं लेते)।

आप आवश्यक फ़ील्ड को "आवश्यक" के वर्ग के साथ टैग कर सकते हैं, एक $ ('फ़ॉर्म') चला सकते हैं। सत्यापित करें () $ (दस्तावेज़ में) पहले से ही () है और यह सब लगता है।

यह Microsoft CDN पर भी शीघ्र वितरण के लिए होस्ट किया गया है: http://www.asp.net/ajaxlibrary/CDN.ashx

Answer 9

:emptyछद्म चयनकर्ता आप मूल्य की जाँच करनी चाहिए, देखने के लिए अगर एक तत्व नहीं बच्चे शामिल हैं प्रयोग किया जाता है:

$('#apply-form input').blur(function() {
     if(!this.value) { // zero-length string
            $(this).parents('p').addClass('warning');
     }
});

Answer 10

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

इस तरह:

$('#apply-form input').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents('p').addClass('warning');
    } else if ($(this).val()) {
          $(this).parents('p').removeClass('warning');
    }
});

Answer 11

function checkForm() {
  return $('input[type=text]').filter(function () {
    return $(this).val().length === 0;
  }).length;
}

Answer 12

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

YourObjNameSpace.yourJqueryInputElement.keyup(function (e){
   if($.trim($(this).val())){
       // trimmed value is truthy meaning real characters are entered
    }else{
       // trimmed value is falsey meaning empty input excluding just whitespace characters
    }
}

Answer 13

$(function() {
  var fields = $('#search_form').serializeArray();
  is_blank = true;
  for (var i = 0; i < fields.length; i++) {
    // excluded fields
    if ((fields[i].name != "locale") && (fields[i].name != "utf8")) {
      if (fields[i].value) {
        is_blank = false;
      }
    }
  }
  if (is_blank) {
    $('#filters-button').append(': OFF');
  }
  else {
    $('#filters-button').append(': ON');
  }
});

जांचें कि क्या सभी फ़ील्ड रिक्त हैं और फ़िल्टर_बटन पर चालू या बंद करें

Answer 14

आप कुछ इस तरह की कोशिश कर सकते हैं:

$('#apply-form input[value!=""]').blur(function() {
    $(this).parents('p').addClass('warning');
});

यह .blur()केवल रिक्त मान वाले इनपुट पर ईवेंट लागू करेगा ।

Comments

अच्छा समाधान, लेकिन इसे केवल तभी काम किया जा सकता है जब इनपुट फ़ंक्शन के कॉल पर इनपुट खाली न हो और केवल तभी जब इनपुट के "मूल्य" विशेषता में मान को बचाया जाए।

— बजे फैबियन वॉन एलर्ट्स

Answer 15

<script type="text/javascript">
$('input:text, input:password, textarea').blur(function()
    {
          var check = $(this).val();
          if(check == '')
          {
                $(this).parent().addClass('ym-error');
          }
          else
          {
                $(this).parent().removeClass('ym-error');  
          }
    });
 </script>// :)

Comments

आपको शायद व्हॉट्सएप को भी ट्रिम करना होगा।

— रैप्टर

Answer 16

HTML 5 के साथ हम एक नई सुविधा "आवश्यक" का उपयोग कर सकते हैं, बस इसे उस टैग में जोड़ें जिसे आप चाहते हैं जैसे:

<input type='text' required>

Comments

और सभी ब्राउज़र इसका समर्थन नहीं करते हैं ... आपको एक जेएस चेक और एक

— सर्वरसाइड

प्रश्न शीर्षक, "जांचें कि क्या इनपुट jQuery का उपयोग कर खाली हैं"

— जोशसैट 1980

Answer 17

उत्तरों का शानदार संग्रह, यह जोड़ना चाहते हैं कि आप :placeholder-shownसीएसएस चयनकर्ता का उपयोग करके भी ऐसा कर सकते हैं । IMO का उपयोग करने के लिए थोड़ा क्लीनर, खासकर यदि आप पहले से ही jQ का उपयोग कर रहे हैं और आपके इनपुट पर प्लेसहोल्डर हैं।

if ($('input#cust-descrip').is(':placeholder-shown')) {
  console.log('Empty');
}

$('input#cust-descrip').on('blur', '', function(ev) {
  if (!$('input#cust-descrip').is(':placeholder-shown')) {
    console.log('Has Text!');
  }
  else {
    console.log('Empty!');
  }
});

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

<input type="text" class="form-control" id="cust-descrip" autocomplete="off" placeholder="Description">

यदि आपके पास आवश्यक इनपुट हैं, तो आप :validऔर :invalidचयनकर्ताओं का उपयोग भी कर सकते हैं। यदि आप किसी इनपुट पर आवश्यक विशेषता का उपयोग कर रहे हैं, तो आप इन चयनकर्ताओं का उपयोग कर सकते हैं।

Answer 18

एक साफ सीएसएस केवल समाधान यह होगा:

input[type="radio"]:read-only {
        pointer-events: none;
}