Check if inputs are empty using jQuery
Doing it on blur is too limited. It assumes there was focus on the form field, so I prefer to do it on submit, and map through the input. After years of dealing with fancy blur, focus, etc. tricks, keeping things simpler will yield more usability where it counts.
$('#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..
});
$('#apply-form input').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('warning');
}
});
And you don't necessarily need .length
or see if it's >0
since an empty string evaluates to false anyway but if you'd like to for readability purposes:
$('#apply-form input').blur(function()
{
if( $(this).val().length === 0 ) {
$(this).parents('p').addClass('warning');
}
});
If you're sure it will always operate on a textfield element then you can just use this.value
.
$('#apply-form input').blur(function()
{
if( !this.value ) {
$(this).parents('p').addClass('warning');
}
});
Also you should take note that $('input:text')
grabs multiple elements, specify a context or use the this
keyword if you just want a reference to a lone element (provided there's one textfield in the context's descendants/children).
if ($('input:text').val().length == 0) {
$(this).parents('p').addClass('warning');
}
Everybody has the right idea, but I like to be a little more explicit and trim the values.
$('#apply-form input').blur(function() {
if(!$.trim(this.value).length) { // zero-length string AFTER a trim
$(this).parents('p').addClass('warning');
}
});
if you dont use .length , then an entry of '0' can get flagged as bad, and an entry of 5 spaces could get marked as ok without the $.trim . Best of Luck.