5

Possible Duplicate:
Check if inputs are empty using jQuery

I have form and textboxes, how will I determine if any of these textboxes is empty using javascript if else statement once a form button is clicked.

function checking() {
    var textBox = $('input:text').value;
    if (textBox == "") {
        $("#error").show('slow');
    }
}

Thanks in advance!

Community
  • 1
  • 1
ray
  • 95
  • 3
  • 4
  • 11

3 Answers3

15

By using jQuery selectors for selecting the elements, you have a jQuery object and you should use val() method for getting/setting value of input elements.

Also note that :text selector is deprecated and it would be better to trim the text for removing whitespace characters. you can use $.trim utility function. 

function checking() {
    var textBox =  $.trim( $('input[type=text]').val() )
    if (textBox == "") {
        $("#error").show('slow');
    }
}

If you want to use value property you should first convert the jQuery object to a raw DOM object. You can use [index] or get method.

 var textBox = $('input[type=text]')[0].value;

If you have multiple inputs you should loop through them.

function checking() {
    var empty = 0;
    $('input[type=text]').each(function(){
       if (this.value == "") {
           empty++;
           $("#error").show('slow');
       } 
    })
   alert(empty + ' empty input(s)')
}
Ram
  • 143,282
  • 16
  • 168
  • 197
  • Hi! This didnt work as well. I have 6 textboxes and two of these textboxes do have values, does it affect the condition? What Im trying to do is once user click the submit button and any of the remaining textboxes is empty the error warning will show. Thanks. – ray Sep 15 '12 at 12:56
  • Hi! No good, i think I dont have to do looping. Actually I have long solution --> `function checking() { if(document.getElementById("entry_0").value == "") { $("#error").show('slow'); } if(document.getElementById("entry_1").value == "") { $("#error").show('slow'); } }` Imagine, If I have 20 textboxes. That's why Im trying to call the input:text object itself or the 'form input' to call all textboxes in just one function. Thanks! – ray Sep 15 '12 at 13:14
  • Hi @undefined! Thanks a lot! It worked actually, tried your update! Many thanks! – ray Sep 15 '12 at 13:23
6

You can not use value with jquery object use val() function, But this will check only the first textbox returned by the selector.

Live Demo

function checking() {    
  var textBox = $('input:text').val();
  if (textBox == "") {
      $("#error").show('slow');
   }
}

You can attach blur event and do this validation on losing focus from each textbox.

Live Demo

$('input:text').blur(function() {    
    var textBox = $('input:text').val();
    if (textBox == "") {
        $("#error").show('slow');
    }
});

Validation on submit button click according to discussion with OP

​Live Demo

$('#btnSubmit').click(function() { 
     $("#error").hide();    
     $('input:text').each(function(){
       if( $(this).val().length == 0)
          $("#error").show('slow');
    });
});
Adil
  • 146,340
  • 25
  • 209
  • 204
  • Thanks for your immediate reply, actually I have tried it as well but no good. I have 6 textboxes and two of these textboxes do have values, does it affect the condition? What Im trying to do is once user click the submit button and any of the remaining textboxes is empty the error warning will show. – ray Sep 15 '12 at 12:50
  • Update my answer, I hope it will help you to do what you want. – Adil Sep 15 '12 at 13:02
  • 1
    @Adil This is an excellent and very informative answer. +1. – tcode Mar 31 '15 at 15:25
1

Try this code:

var textBox = $('input:text').val();

if (textBox==""){ 
  $("#error").show('slow'); 
}
Alessandro Minoccheri
  • 35,521
  • 22
  • 122
  • 171