Menu
How do I identify empty textboxes using jQuery? I would like to do it using selectors if it is at all possible. Also, I must select on id since in the real code where I want to use this I don't want to select all text inputs.
In my following two code examples the first one accurately displays the value typed into the textbox "txt2" by the user. The second example identifies that there is an empty textbox, but if you fill it in it still regards it as empty. Why is this?
Can this be done using just selectors?
This code reports the value in textbox "txt2":
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#cmdSubmit').click(function() { alert($('[id=txt2]').val()); }); }); </script> </head> <body> <form> <input type="text" name="txt1" id="txt1" value="123" /><br /> <input type="text" name="txt2" id="txt2" value="" /><br /> <input type="text" name="txt3" id="txt3" value="abc" /><br /> <input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br /> </form> </body> </html> This code always reports textbox "txt2" as empty:
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#cmdSubmit').click(function() { if($('[id^=txt][value=""]').length > 0) { if (!confirm("Are you sure you want to submit empty fields?")) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } } } }); }); </script> </head> <body> <form> <input type="text" name="txt1" id="txt1" value="123" /><br /> <input type="text" name="txt2" id="txt2" value="" /><br /> <input type="text" name="txt3" id="txt3" value="abc" /><br /> <input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br /> </form> </body> </html> 
716
To check if the input text box is empty using jQuery, you can use the . val() method. It returns the value of a form element and undefined on an empty collection.
Another way
$('input:text').filter(function() { return $(this).val() == ""; }); or
$('input:text').filter(function() { return this.value == ""; }); or
// WARNING: if input element does not have the "value" attribute or this attribute was removed from DOM then such selector WILL NOT WORK! // For example input with type="file" and file does not selected. // It's prefer to use "filter()" method. // Thanks to @AaronLS $('input:text[value=""]'); Working Demo
code from the demo
jQuery
$(function() { $('#button').click(function() { var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; }); var string = "The blank textbox ids are - \n"; emptyTextBoxes.each(function() { string += "\n" + this.id; }); alert(string); }); }); You could also do it by defining your own selector:
$.extend($.expr[':'],{ textboxEmpty: function(el){ return $(el).val() === ""; } }); And then access them like this:
alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
