CODEWITHSUNDEEP
javascriptvalidationform-submit
user4257127
user4257127

Reputation:

Why is return false not keeping my form from submitting?

http://jsfiddle.net/1z9Lr5rv/1/

I am creating a contact form for my website. I thought it was working fine, but it always submits the form, wether or not there's an error, where return false should keep the form from submitting.

I'm sorry if this is really obvious and dumb, but I'm very new to this sort of thing . . .

Upvotes: 1

Views: 157

Answers (2)

hammus
hammus

Reputation: 2612

You need to handle the event object that is automatically passed into the submit handler and call preventDefault().

Example:

var myForm = document.forms["contact-me"];

myForm.onsubmit = function(e)
{
    if(!warnsub())
    {
    e.preventDefault();
    }
}

As @Pointy has commented: IE9 does not automatically pass the event object to the onsubmit delegate. Discussion of how to shiv this is outside the scope of this question.

But just a side note - its good to try and avoid function calls in inline html (e.g. <form onsubmit=//your function() /> calls. Your Google-Fu can teach you why.

Upvotes: 2

RobG
RobG

Reputation: 147343

The form works fine if you take it out of JS Fiddle (you should post the code here anyway). Here it is (with the redundant parts removed):

<div class="body">If you have any questions about me, my teaching or curriculum, etc., please don't hesitate to contact me here. Please fill out all the fields in this form..
  <br>
  <br>
  <form name="contact-me" class="contact-me" onsubmit="return warnsub(this)"
     method="POST"
    action="https://secure.mailjol.net/allforms/u/3dcdda44.php" autocomplete="off">
    First Name: <input type="text" name="fname">
    Last Name: <input type="text" name="lname">
    Email Address: <input type="text" name="email">
    Message: <textarea name="message" id="message"></textarea>
    <input type="submit" value="Send">
  </form>
</div>


<script>

function warnsub(form) {
    var error = [];
    var fname = form.fname;
    var lname = form.lname;
    var email = form.email;
    var message = form.message;
    var atpos = email.value.indexOf("@");
    var dotpos = email.value.lastIndexOf(".");

    if (fname.value == "") {
        error.push(fname);
    }
    if (lname.value == "") {
        error.push(lname);
    }
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
        error.push(email);
    }
    if (message.value == "") {
        error.push(message);
    }

    if (error.length) {
        for (i = 0; i < error.length; i++) {

            // You want to clear this class if the user has another
            // attempt and gets it right
            error[i].className = 'error';
        }
        error[0].focus();
        return false;
    }
    return true;
}

Upvotes: 2

Related Questions