function validateForm(){
var validEmail, validSubject, validComment = true;
var validDocument = true;

var emailEntry =document.forms["contact_form"]["email"].value;
var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,6}$/;
if (!pattern.test(emailEntry)) {
    //Not a valid email
    validEmail = false;
}
var subjectEntry = document.forms["contact_form"]["subject"].value;
if(subjectEntry.length < 6) {
    //Not a valid subject
    validSubject = false;
}
var commentsEntry = document.forms["contact_form"]["comments"].value;
if(commentsEntry.length < 50) {
    //Not a valid comment
    validComment = false;
}

var err1 = document.getElementById("email_error");
var err2 = document.getElementById("subject_error");
var err3 = document.getElementById("comment_error");

if(!validEmail) {
    //make error messages visible
    validDocument = false;
    err1.style.visibility = "visible";
} else {
    err1.style.visibility = "hidden";
}

if(!validSubject) {
    //make error messages visible
    validDocument = false;
    err2.style.visibility = "visible";
} else {
    err2.style.visibility = "hidden";
}

if(!validComment) {
    //make error messages visible
    validDocument = false;
    err3.style.visibility = "visible";
} else {
    err3.style.visibility = "hidden";
}

if(!validDocument) {
    var container = document.getElementById("errors");
    container.style.visibility = "visible";
    return false;
} else {
    return true;
}}

<div id="contact_fields">
            <form name="contact_form" onSubmit="return validateForm()" method="post" action="form_mailer.php">

                <font class="form_headers" face="Arial, Helvetica, sans-serif" size="4" color="#FFF">
                Your e-mail address :
                </font>

                <br><input type="text" name="email" id="email" value="" size="40"
                style="height:10%;font-size:1.3vw;">
                <br><br><br><br>


                <font class="form_headers" face="Arial, Helvetica, sans-serif" size="4" color="#FFF">
                Subject :
                </font>

                <br><input type="text" name="subject" id="subject" value="" size="40"
                style="height:10%;font-size:1.3vw;">
                <br><br><br><br>


                <font class="form_headers" face="Arial, Helvetica, sans-serif" size="4" color="#FFF">
                Message :
                </font>

                <br><textarea name="comments" id="comments" rows="8" cols="40"
                style="font-size:1.3vw;"></textarea>
                <br>
                <font face="Arial, Helvetica, sans-serif" size="2" color="#FFF">
                 &bull; You must fill in all fields in order to submit.
                </font>
                <br>
                <input type="submit" name="Submit" value="submit" style="float:right;">
            </form>


        </div>



        <div id="errors" style="visibility:hidden">
            <p><font id="email_error" face="Arial, Helvetica, sans-serif" style="visibility:hidden" color="#FF0000">
                *Enter a valid e-mail</font></p>
            <p><font id="subject_error" face="Arial, Helvetica, sans-serif" style="visibility:hidden" color="#FF0000">*Subject must be at least 6 characters</font></p>
            <p><font id="comment_error" face="Arial, Helvetica, sans-serif" style="visibility:hidden" color="#FF0000">*Message must be at least 50 characters</font></p>
        </div>

function validator(/*fn, args */) {
    var predicate = arguments[0];
    var args = Array.prototype.splice.call(arguments, 1);

    return function() {
        return (predicate.apply(null, arguments) == true);
    };
};

var isEmail = validator(function(email) {
    return /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/.test(email);
});

var isStringLengthGreaterThan = validator(function(value, length) {
    return (value.length > length);
});

function isFieldValid(formId, domId, validatorFn) {
    var args = Array.prototype.splice.call(arguments, 3);
    args.unshift( document.forms[formId][domId].value );
    return validatorFn.apply(null, args);
};

function validateForm(){
    var validFields = [
        isFieldValid('contact_form', 'email', isEmail),
        isFieldValid('contact_form', 'subject', isStringLengthGreaterThan, 6),
        isFieldValid('contact_form', 'comments', isStringLengthGreaterThan, 50)
    ];

    var errorDomId = ["email_error", "subject_error", "comment_error"];

    validFields.forEach(function(isValid, index) {
        if ( isValid == false) {
            document
                .getElementById(errorDomId[index])
                .style
                .visibility = 'visible';
        };
    });

    if (validFields.indexOf(false) > -1) {
        var container = document.getElementById("errors");
        container.style.visibility = "visible";
    }

    return  (validFields.indexOf(false) == -1);
}