14

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>
HoRn
  • 1,458
  • 5
  • 20
  • 25
James Daley
  • 259
  • 2
  • 8
  • 20
  • 1
    Possible duplicate: [HTML/Javascript: Simple form validation on submit](http://stackoverflow.com/questions/16134733/html-javascript-simple-form-validation-on-submit) But to try and help, make sure you're actually executing the validation code using the `onSubmit` HTML attribute on the `
    ` tag itself.
     – Brandon Anzaldi Jan 13 '15 at 09:36
  • you can call this method onsubmit form event and do e.preventDefault() and after that validate code and then document.form.submit(); or document.
    .submit();
     – Innovation Jan 13 '15 at 09:41
  • @Innovation Thanks but I tried this and it doesn't make any difference the form still submits – James Daley Jan 13 '15 at 09:55
  • 1
    Please cache `document.forms["register"]` instead of repeating yourself all those times… – RobG Jan 13 '15 at 10:14
  • provide your html code. – Innovation Jan 13 '15 at 10:28

2 Answers2

19

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>
Quentin Morrier
  • 675
  • 5
  • 14
6

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

Brandon Anzaldi
  • 6,884
  • 3
  • 36
  • 55
brammekuhh
  • 133
  • 1
  • 9