This is really throwing me for a loop. I had this form successfully validating with my javascript by calling onsubmit="return validateForm()" when my validateForm function was inside a global variable. Unfortunately, once I started trying to debug IE8, I kept getting errors for having a global variable and I decided to make it a global function instead...

Now I can't seem to get it to trigger at all. -_-

(And yeah—I've actually prefixed it in testing to make sure it wasn't conflicting due to being global.)

From what I can tell, I'm doing the epitome of a basic form. This method is the one shown on w3schools, and it works for them, so... what gives?

My form:

<form name="emailus" id="emailus" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" onsubmit="return validateForm()">
    <a href="mailto:[email protected]">
        <h3><i class="icon-envelope-alt icon-large"></i>Send us an email<span>: [email protected]</span></h3>
    </a>

    <div class="half">
        <fieldset class="name">
            <label for="cf_name">Name <span>*</span></label>
            <input type="text" id="cf_name" name="cf_name" class="textualformfield" placeholder="Jane Doe" pattern="^[a-zA-Z'\s]+$">
        </fieldset>
        <fieldset class="emailaddress">
            <label for="cf_email">E-mail <span>*</span></label>
            <input type="text" id="cf_email" name="cf_email" class="textualformfield" placeholder="[email protected]" pattern="[a-z0-9!#$%\x26'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%\x26'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}||org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b">
        </fieldset>
        <fieldset class="phonenumber">
            <label for="cf_phonenumber">Phone</label>
            <input type="tel" id="cf_phonenumber" name="cf_phonenumber" class="textualformfield" placeholder="555-555-5555">
        </fieldset>
        <fieldset class="eventdate">
            <label for="cf_eventdate">Event Date</label>
            <input type="text" id="cf_eventdate" name="cf_eventdate" class="textualformfield" placeholder="May 25th, 2012">
        </fieldset>
        <fieldset class="location">
            <label for="cf_location">Location</label>
            <input type="text" id="cf_location" name="cf_location" class="textualformfield" placeholder="The Church">
        </fieldset>
    </div>

    <div class="half">
        <textarea name="cf_message" class="textualformfield" placeholder="Your Message"></textarea>
    </div>

    <input type="submit" name="submit" id="submit" value="Submit">
</form>

My javascript function, located outside of (document).ready so that it should be able to be called:

function validateForm() {
    window.alert("I'm activating!");
    var valid = true;

    jQuery('p.validationhelpers').remove();

    if (document.emailus.cf_email.value === '') {
        jQuery('.emailaddress').append("<p class='validationhelpers'>Please enter an email address.</p>");
        jQuery('.emailaddress>input').focus();
        valid = false;
    }

    if (document.emailus.cf_name.value === '') {
        jQuery('.name').append("<p class='validationhelpers'>Please enter your name.</p>");
        jQuery('.name>input').focus();
        valid = false;
    }

    return valid;
}

Instead, it just submits... I feel like this is a dumb problem. I've tried replacing the onsubmit's content with return validateForm();, return false; return validateForm() (which indeed returned false and prevented submission), return validateForm(); return false();, and validateForm() and validateForm();.

>_<

SOLUTION: bjornarvh found the real cause from debugging the actual site. I'm highlighting it here because the real answer is within the ments of the answer marked as Solved.

Turns out I was missing a closing bracket for one of my functions in javascript, which was causing the validateForm function to be wrapped within (document).ready, which made it inaccessible to onsubmit. Accidental scope issue!

This is really throwing me for a loop. I had this form successfully validating with my javascript by calling onsubmit="return validateForm()" when my validateForm function was inside a global variable. Unfortunately, once I started trying to debug IE8, I kept getting errors for having a global variable and I decided to make it a global function instead...

Now I can't seem to get it to trigger at all. -_-

(And yeah—I've actually prefixed it in testing to make sure it wasn't conflicting due to being global.)

From what I can tell, I'm doing the epitome of a basic form. This method is the one shown on w3schools, and it works for them, so... what gives?

My form:

<form name="emailus" id="emailus" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" onsubmit="return validateForm()">
    <a href="mailto:[email protected]">
        <h3><i class="icon-envelope-alt icon-large"></i>Send us an email<span>: [email protected]</span></h3>
    </a>

    <div class="half">
        <fieldset class="name">
            <label for="cf_name">Name <span>*</span></label>
            <input type="text" id="cf_name" name="cf_name" class="textualformfield" placeholder="Jane Doe" pattern="^[a-zA-Z'\s]+$">
        </fieldset>
        <fieldset class="emailaddress">
            <label for="cf_email">E-mail <span>*</span></label>
            <input type="text" id="cf_email" name="cf_email" class="textualformfield" placeholder="[email protected]" pattern="[a-z0-9!#$%\x26'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%\x26'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}||org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b">
        </fieldset>
        <fieldset class="phonenumber">
            <label for="cf_phonenumber">Phone</label>
            <input type="tel" id="cf_phonenumber" name="cf_phonenumber" class="textualformfield" placeholder="555-555-5555">
        </fieldset>
        <fieldset class="eventdate">
            <label for="cf_eventdate">Event Date</label>
            <input type="text" id="cf_eventdate" name="cf_eventdate" class="textualformfield" placeholder="May 25th, 2012">
        </fieldset>
        <fieldset class="location">
            <label for="cf_location">Location</label>
            <input type="text" id="cf_location" name="cf_location" class="textualformfield" placeholder="The Church">
        </fieldset>
    </div>

    <div class="half">
        <textarea name="cf_message" class="textualformfield" placeholder="Your Message"></textarea>
    </div>

    <input type="submit" name="submit" id="submit" value="Submit">
</form>

My javascript function, located outside of (document).ready so that it should be able to be called:

function validateForm() {
    window.alert("I'm activating!");
    var valid = true;

    jQuery('p.validationhelpers').remove();

    if (document.emailus.cf_email.value === '') {
        jQuery('.emailaddress').append("<p class='validationhelpers'>Please enter an email address.</p>");
        jQuery('.emailaddress>input').focus();
        valid = false;
    }

    if (document.emailus.cf_name.value === '') {
        jQuery('.name').append("<p class='validationhelpers'>Please enter your name.</p>");
        jQuery('.name>input').focus();
        valid = false;
    }

    return valid;
}

Instead, it just submits... I feel like this is a dumb problem. I've tried replacing the onsubmit's content with return validateForm();, return false; return validateForm() (which indeed returned false and prevented submission), return validateForm(); return false();, and validateForm() and validateForm();.

>_<

SOLUTION: bjornarvh found the real cause from debugging the actual site. I'm highlighting it here because the real answer is within the ments of the answer marked as Solved.

Turns out I was missing a closing bracket for one of my functions in javascript, which was causing the validateForm function to be wrapped within (document).ready, which made it inaccessible to onsubmit. Accidental scope issue!

• javascript
• html
• forms
• validation
• scope

1 Answer 1

JavaScript is case sensitive, so you need to add

onsubmit="return ValidateForm()"

instead of

onsubmit="return validateForm()"