Question

I have a pretty straight-forward javascript form validation script written:

      function validateForm(){
        var x=document.forms["contactForm"]["firstname"].value;
        if (x==null || x==""){
            return false;
        }

        var y=document.forms["contactForm"]["lastname"].value;
        if (y==null || y==""){
            return false;
        }

        var z=document.forms["contactForm"]["emailaddress"].value;
        var atpos=z.indexOf("@");
        var dotpos=z.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=z.length){
            return false;
        }
        var msg_area = document.getElementById("message");
        msg_area.innerHTML = "";
        if (document.getElementById("message").value.length < 20) {
            return false;
        }
        else document.getElementById("contactForm").submit();
    }   

It’s supposed to be validating this form:

 <form name="contactForm" onsubmit="return validateForm()" action="./thankyou.html" method="post">
        <label for="firstName">First Name <sup>*</sup></label>
        <input name ="firstname" id="firstName" type="text" placeholder="First Name" required />
        <label for="lastName">Last Name <sup>*</sup></label>
        <input name ="lastname" id="lastName" type="text" name="lastName" placeholder="Last Name" required />
        <label for="emailaddress">Email address <sup>*</sup></label>
        <input name="emailaddress" id="emailAddress" type="email" placeholder="[e-mail]" required />
        <label for="message">Message<sup>*</sup></label>
        <textarea id="message" placeholder="Remember, be nice!" required></textarea>
        <input type="submit" name="submit" value="Email Me!" class="emailsub" />
        <p class="small"><sup>*</sup> denotes a required field.</p>
    </form>

When it’s submitted, it doesn’t seem to actually call the javascript at all. The only thing that it looks for is that it meets the “required” part of the html. I’m pretty new to javascript so it’s probably glaringly obvious where the problem is, but I just can’t locate it myself.

Any help is much appreciated!

p.s. this is for a local website at the moment so the action=”” goes to another html instead of a page to process the message. Is this possibly the problem here?

Answer 1

The html5 “required” attribute tells the browser to validate before proceeding, read more here. This means that it’s stopping the event before the javascript function is even called (on supported browsers) unless it passes the basic validation (required fields and email).

If you want the javascript to execute and perform your own validation, you’ll need to remove the “required” attribute. You may also try more complex html form validation. Here is a good article on the subject.