Validating a form with JavaScript with multiple variations

I'm having trouble making sure that my form is completely filled out.

Here is the html:

<div id="username_input">
    <span>User name:</span> <input id="username" onclick="changeBackground('#ffffff', this.id)" type="text" name="firstname" />
    <small id="username_error_message">please input username</small>
</div><!-- End of div id username_input -->

<div id="email_input">
    <span>Email:</span> <input id="email" onclick="changeBackground('#ffffff', this.id)" type="text" name="email" />
    <small id="email_error_message">please input email</small>
</div><!-- End of div id email_input -->

<div id="textarea">
    <textarea id="textarea_body" onclick="clearTextarea()" rows="5" cols="120"></textarea>
</div><!-- End of div id textarea -->

<div id="submit_button">
    <input id="button" type="submit" name="Submit" value="Post Comment" />
</div><!-- End of div id button -->

All I'm trying to do is to make sure that a user doesn't leave an empty input.

Here is what I have so far before running into a problem:

function inputCheck() {
        /*  This is to check if the values, username - email 
            and text area body, in the input form are filled in */
        if($('username').value.length == 0 || $('email').value.length == 0 || $('textarea_body').va开发者_高级运维lue.length == 0) {
            if($('username').value.length == 0) {
                alert("Invalid username");
                return false;
            } else if ($('email').value.length == 0) {
                alert("Invalid email");
                return false;
            } else {
                alert("Invalid post");
                return false;
            }

        } else {
            return true;
        }

I want all three alert boxes to show up at once. The problem I'm having is that it looks at the first if statement and then breaks out of the JavaScript code.

I am later on going to have unique messages tell them "Please input email" or "Please input username" but since I can't more then one if statement I don't know how this is going to work.

I don't want to be using an js libraries.

If you aren't using a Javascript library, what is $() defined as?

If it is something similar to the jQuery library then you would need to use $('#username') or document.getElementById('username') instead.

var message = "";
if ( !$('username').value ) {
    message += "Invalid username. ";
}
if ( !$('email').value ) {
    message += "Invalid email. ";
}
if ( message === "" ) {
    message = "Invalid post.";
}

alert(message);
return false;

Your return false; statement after each alert will exit your inputCheck() function and return to the caller which I'm guessing is the Form Post event and returning false is preventing submission. This occurs after the first error found.

For a user to get multiple alert boxes they have to acknowledge for form validation isn't a great user experience. Consider building up a string with all the errors from the form and show them in one alert.

function inputCheck() {
    var errMsg = '';

    if($('username').value.length == 0) errMsg += 'Enter a valid username.\n';
    if($('email').value.length == 0) errMsg += 'Enter a valid email address.\n';
    if($('textarea_body').value.length == 0) errMsg += 'Enter an email body.\n';

    if(errMsg.length > 0) {
        alert('Please correct the following:\n' + errMsg);
        return false;
    }

    return true;
}