JQuery ব্যবহার করে ইনপুটগুলি খালি কিনা তা পরীক্ষা করুন

Question

আমার একটি ফর্ম রয়েছে যা আমি চাই যে সমস্ত ক্ষেত্র পূরণ করা হোক a যদি কোনও ক্ষেত্রটি ক্লিক করা হয় এবং তারপরে পূরণ না করা হয় তবে আমি একটি লাল পটভূমি প্রদর্শন করতে চাই।

আমার কোডটি এখানে:

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

ক্ষেত্রটি পূরণ করা হোক বা না হোক তা সতর্কতা শ্রেণীর প্রয়োগ করে app

আমি কি ভুল করছি?

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 () && $ (এটি) .ভাল ()! = "" )

— আলফাসিন

this (এটি) .ভাল () দৈর্ঘ্য <1

— টমাস

আপনার ওজবনেমস্পেস.ইউরজকোইইনপুটমেন্টমেন্ট.কিউআপ (ফাংশন (ই)) {যদি ($। ট্রিম (this (এটি) .ভাল ())) {// ছাঁটাই করা মান সত্য} অন্য {// ছাঁটাই করা মানটি মিথ্যা}}

— ফ্রেঞ্চি লসক্যাভিও

আমি ক্ষেত্রগুলির দৈর্ঘ্যকে এত কম সময়ে যাচাই করি যে আমি সম্পূর্ণরূপে উপেক্ষা করেছি .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');
     }
});

যদি আপনি। দৈর্ঘ্য ব্যবহার না করেন, তবে '0' এর একটি এন্ট্রি খারাপ হিসাবে চিহ্নিত হতে পারে এবং 5 টি স্পেসের একটি প্রবেশ $ .trim ব্যতীত ঠিক হিসাবে চিহ্নিত হতে পারে। শুভকামনা করছি.

Comments

পুরোপুরি সঠিক. ট্রিমিং প্রয়োজনীয়, বিশেষত যখন চিকিত্সাযুক্ত WYSIWYG সম্পাদক (যেমন jWYSIWYG, উদাহরণস্বরূপ) ব্যবহার করার সময়।

— জোশ স্মিথ

আমি মানটি ভ্যালু ---> এ পরিবর্তনের পরামর্শ দিতে পারি যদি (! $। ট্রিম (এটি.ভাল) দৈর্ঘ্য) {// শূন্য-দৈর্ঘ্যের স্ট্রিং একটি ট্রিমের পরে $ (এটি)। সতর্কীকরণ '); }

— কে। কিলিয়ান লিন্ডবার্গ

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

— উইক

আমি প্রস্তাব দিচ্ছি $ (এটি) .নোট ('[মান]')। অ্যাডক্লাস ('সতর্কতা') 1.9 jsfiddle.net/znZ9e

— জেমি পেট

আমি বিশ্বাস করি যে ক্ষেত্রটি কোনও মান বৈশিষ্ট্য দিয়ে শুরু হয়েছিল কিনা কেবল তা পরীক্ষা করে। এটি সত্যিকারের ফর্মের ক্ষেত্রের মানটি যেমন আপনার যাচাইকরণের প্রয়োজন তা পরীক্ষা করে না। jsfiddle.net/T89bS ... মান বৈশিষ্ট্যবিহীন ক্ষেত্রটি সালমানের সাথে চড় মারবে যদি আপনি এটিতে কিছু টাইপ করেন তবে।

— উইক

Answer 7

কিপআপ ইভেন্টটি সনাক্ত করবে যদি ব্যবহারকারী পাশাপাশি বাক্সটি সাফ করে দেয় (যেমন ব্যাকস্পেস ইভেন্টটি উত্থাপন করে তবে ব্যাকস্পেস আইই তে কীপ্রেস ইভেন্টটি বাড়ায় না)

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

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

Answer 8

পরিবর্তে jQuery বৈধতা প্লাগইন ব্যবহার বিবেচনা করুন । এটি সাধারণ প্রয়োজনীয় ক্ষেত্রগুলির জন্য সামান্য ওভারকিল হতে পারে, তবে এটি যথেষ্ট পরিপক্ক যে এটি এমন প্রান্তের কেসগুলি পরিচালনা করে যা আপনি এখনও ভাবেননি (আমরা তাদের মধ্যে পৌঁছানো পর্যন্ত আমাদের কোনওটিই করবে না)।

আপনি "প্রয়োজনীয়" শ্রেণীর সাথে প্রয়োজনীয় ক্ষেত্রগুলি ট্যাগ করতে পারেন, একটি $ ('ফর্ম') চালাতে পারেন valid (ডকুমেন্ট) -তে বৈধতা দিন (প্রস্তুত) (প্রস্তুত) (এবং এটি যা লাগে তা কেবল।

এটি দ্রুত সরবরাহের জন্য মাইক্রোসফ্ট সিডিএন-তেও হোস্ট করা হয়েছে: 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

ভাল সমাধান, তবে সতর্ক হতে হবে কেবলমাত্র যদি কাজটি ইনপুটটি ইনপুট খালি না হয় এবং ইনপুটটির "মান" বৈশিষ্ট্যে মানটি সংরক্ষণ করা হয় কেবল তখনই works

— ফ্যাবিয়ান ভন এলার্টস

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

এইচটিএমএল 5 এর সাহায্যে আমরা একটি নতুন বৈশিষ্ট্য "প্রয়োজনীয়" ব্যবহার করতে পারি কেবলমাত্র এটির মতো ট্যাগটিতে যুক্ত করতে যা আপনার প্রয়োজন হতে পারে:

<input type='text' required>

Comments

এবং সমস্ত ব্রাউজার এটি সমর্থন করে না ... আপনাকে একটি জেএস চেক এবং একটি সার্ভারসাইড চেক যোগ করতে হবে

— পুনরায় ইজারা। 85

প্রশ্নের শিরোনাম, "jQuery ব্যবহার করে ইনপুটগুলি খালি কিনা তা পরীক্ষা করুন"

— JoshYates1980

Answer 17

উত্তরের উত্তম সংগ্রহ, আপনি যুক্ত করতে চাইবেন যে আপনি :placeholder-shownসিএসএস নির্বাচক ব্যবহার করে এটিও করতে পারেন । আইএমও ব্যবহার করার জন্য একটু ক্লিনার, বিশেষত যদি আপনি ইতিমধ্যে জিকিউ ব্যবহার করছেন এবং আপনার ইনপুটগুলিতে স্থানধারক রয়েছে।

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

একটি পরিষ্কার CSS-এর সমাধান হ'ল:

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