Question

I am trying to do a form validate which is checking for unfilled entries. In my form, I have inputs, textareas, and selects. I was able to get the input validation working, but I can’t get the textarea to work (I haven’t even tried on the select yet.). Here is my code:

$(document).ready(function(){   
$('input[type=submit]').click(function()
{
    if( ($(":text:not(:disabled)[value='']").length !== 0) || $(textarea).html == '') 
    {
        //$('#message').parents('p').addClass('warning');
        var happy = "happy";
        document.getElementById("message").innerHTML = "All entries must be completed";
        //var cool = document.getElementById(id).attributes.getNamedItem("value").nodeValue;
        alert('All Entries Must Be Completed');
        return false;
    }
    else
    {
        alert ('mess up');
        return false;
    }

});                                     

});

How would I do this for select as well?
Also, I was only able to get this first part working from the help on another stackoverflow post, but I realized afterwords that I’m not sure why it works. Why am I doing the if statement for when its not equal to zero (!==) ? Shouldn’t I be doing it when it’s equal to zero?

Answer 1

For text boxes and textareas you should use .val() with $.trim to check for blank values. For e.g.,

if($.trim($("#textboxid").val()) == "") {
    //do something
}

For selects, if you are using jquery below version 1.6 use .attr, else use .prop() to get the selected index of the select input. For e.g.,

jQuery < 1.6

if($("#selectid").attr("selectedIndex") <= 0) {
    //do something
}

jQuery >= 1.6

if($("#selectid").prop("selectedIndex") <= 0) {
    //do something
}