javascript: validate form before submit?

Question

I would really appreciate anyone's help with this as I just can't seem to get it working. I am using a javascript code to check my form before it is submitted. I check for things like empty boxes.

If boxes are empty then this should display one of three divs which contains a standard error text.

"There was an error"

I have three different divs, div1 div2 and div3 which contain error statements. I have done this because I have divided my form into three sections. Therefore I want my javascript to perform three different checks on the three different sections in my form and if an error has occurred in which ever section then display div1 or div 2 or div3 for that section.

Section 1 
<div 1>
<input = firstname>
<input = lastname>
<input = email>
<input = email2>

section 2
<div 2>
<input = contactnum>
<input = mobnum>
<input = postcode>

section 3
<div 3>
<input = compname>
<input = compreg>

here is my javascript code I am trying to put together but it's not working, it submits the form without doing any checks. please can someone show me where I am going wrong.

<script>
    function validateForm() {
        var a = document.forms["register"]["firstname"].value;
        var b = document.forms["register"]["lastname"].value;
        var c = document.forms["register"]["email"].value;
        var d = document.forms["register"]["email2"].value;
        if (a == null || a == "" || b == null || b == "" || c == null || c == ""|| d == null || d == "") {
            $(".form_error").show();
            $('html,body').animate({
               scrollTop: $(".form_error").offset().top - 180 
            });


            var e = document.forms["register"]["contactnum"].value;
            var f = document.forms["register"]["mobnum"].value;
            var g = document.forms["register"]["postcode"].value;
            if (e == null || e == "" || f == null || f == "" || g == null || g == "") {
                $(".form_error").show();
                $('html,body').animate({
                     scrollTop: $(".form_error").offset().top - 180 
                });


                var h = document.forms["register"]["compname"].value;
                var i = document.forms["register"]["compreg"].value;
                if (h == null || h == "" || i == null || i == "") {
                    $(".form_error").show();
                    $('html,body').animate({
                        scrollTop: $(".form_error").offset().top - 180 
                    });

                    return false;
                }   
            }
        }
    }
 </script>

Answer 1

In the form tag there is a field onsubmit to specify your validation function. Something like that:

<form name="myForm" onsubmit="return validateForm()" method="post">
    <!-- your inputs -->

</form>

Answer 2

You should use event.preventDefault(); in your if statement when you check for errors.

I you are clicking a submit button, first check all the fields, if something fails in your validation, raise event.preventDefault(). With this, this will prevent the form to submit.

If there are no errors, the preventDefault will not be raised and the form will be submitted.

Extra information: jQuery API