Form Validation Before Submit

HTML

<div class="login">
     <h1>Login to Web App</h1>

    <form class="signup-form" method="post" action="index.html">
        <p>
            <input class="required" type="text" name="login" value="" placeholder="Username or Email" />
        </p>
        <p>
            <input class="required" type="password" name="password" value="" placeholder="Password" />
        </p>
        <p class="remember_me">
            <label>
                <input type="checkbox" name="remember_me" id="remember_me" />Remember me on this computer</label>
        </p>
        <p class="submit">
            <input type="submit" name="commit" value="Login" />
        </p>
    </form>
</div>

CSS

.input-validation-error {
    border: 1px solid #f00 !important;
    background-color: #F8E0E0 !important;
}

JavaScript

// Validate form fields in Sign up form 
$(".signup-form").submit(function () {
    var isFormValid = true;
    $(".signup-form .required").each(function () { // Note the input:text
        if ($.trim($(this).val()).length == 0) {
            $(this).addClass("input-validation-error");
            isFormValid = false;
        } else {
            $(this).removeClass("input-validation-error");
        }
    });
    if (!isFormValid) alert("Please fill in all the required fields (highlighted in red)");
    return isFormValid;
});