Form's input type=“submit” does not seem to trigger the onsubmit handler

问题

I am attempting to trigger a javascript function via onsubmit to validate my form.

I know that the function itself works because I can call it within script tags immediately after the form's markup and I receive my console.log message and the error messages it creates appear on the form.

The PHP validation itself works, but I've only been able to actually submit the form via javascript's .submit placed upon a div. Obviously because this bypasses any client-side validation, I can't leave it that way, thus I've replaced my div id="submit" with an input type="submit".

I've been looking at other examples, including forms I've coded myself in the past that I know work, and seem completely out of answers. This is probably insanely easy, and for some reason, I just can't and haven't been able to see it for the last 6 hours. o_O

Here is my form's markup:

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

    <div class="half">
        <fieldset class="name">
            <label for="cf_name"><h4>Name <span>*</span></h4></label>
            <input type="text" name="cf_name" class="textualformfield" alt="Jane Doe" pattern="^[a-zA-Z'\s]+$">
        </fieldset>
        <fieldset class="emailaddress">
            <label for="cf_email"><h4>E-mail <span>*</span></h4></label>
            <input type="text" name="cf_email" class="textualformfield" alt="janedoe@email.com" pattern="{long string of regex}">
        </fieldset>
        <fieldset class="phonenumber">
            <label for="cf_phonenumber"><h4>Phone</h4></label>
            <input type="tel" name="cf_phonenumber" class="textualformfield" alt="555-555-5555">
        </fieldset>
        <fieldset class="eventdate">
            <label for="cf_eventdate"><h4>Event Date</h4></label>
            <input type="text" name="cf_eventdate" class="textualformfield" alt="May 25th, 2012">
        </fieldset>
        <fieldset class="location">
            <label for="cf_location"><h4>Location</h4></label>
            <input type="text" name="cf_location" class="textualformfield" alt="The Church">
        </fieldset>
    </div>

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

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

I've attempted several different iterations of onsubmit="return validateForm();"—with or without the semicolon, writing it as onSubmit or onsubmit... I don't know. I can't see what's wrong with this at all. Anyone?

Below is the function to be called onsubmit, validateForm. It is located in another file, but the file is always included when the form is, and I've made sure this function is not within $(document).ready and is available globally as I've called it from within script tags directly following the form.

var validateForm = function() {
    var valid = true;

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

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

    if (document.emailus.cf_name.value == "" || document.emailus.cf_name.value == "Jane Doe") {
        jQuery('.name').append("<p class='validationhelpers'>Please enter your name.</p>");
        jQuery('.name>input').focus();
        valid = false;
    }
    console.log("I was triggered");

    return valid;
}

Edit 2: Added PHP Validation/Post code:

<?php if (!empty($_POST) ) { 
    $field_name = $_POST['cf_name'];
    $field_email = $_POST['cf_email'];
    $field_phone = $_POST['cf_phonenumber'];
    $field_eventdate = $_POST['cf_eventdate'];
    $field_location = $_POST['cf_location'];
    $field_message = $_POST['cf_message'];

    $mail_to = 'example@email.com';

    //final attempt at validation or email submission preventation
    if ($field_name == "Jane Doe" || empty($field_name) || $field_email == "janedoe@email.com" || empty($field_email)) {
        return false;
    }


    if (!($field_eventdate == "May 25th, 2012") && !empty($field_eventdate) && !($field_name == "Jane Doe") && !empty($field_name)) {
        $subject = 'Request for '.$field_date. ' from '.$field_name . 'via thiswebsite.com';
    } else {
        $subject = $field_name . ' has contacted you via thiswebsite.com';
    }

    if (!($field_name == "Jane Doe") && !empty($field_name)) {
        $body_message = 'Client\'s Name: '.$field_name."\n\n";
    }
    if (!($field_email == "janedoe@email.com") && !empty($field_email)) {
        $body_message .= 'E-mail: '.$field_email."\n\n";
    }
    if (!($field_phone == "555-555-5555") && !empty($field_phone)) {
        $body_message .= 'Phone: '.$field_phone."\n\n";
    }
    if (!($field_eventdate == "May 25th, 2012") && !empty($field_eventdate)) {
        $body_message .= 'Event Date: '.$field_eventdate."\n\n";
    }
    if (!($field_location == "The Church") && !empty($field_location)) {
        $body_message .= 'Location: '.$field_location."\n\n";
    }
    if (!($field_message == "Your Message") && !empty($field_message)) {
        $body_message .= 'Message: '. "\n".$field_message;
    }

    $headers = 'From: '.$field_email."\r\n";
    $headers .= 'Reply-To: '.$field_email."\r\n";

    $mail_status = mail($mail_to, $subject, $body_message, $headers);

    $body_message = stripslashes($body_message);

    if ($mail_status) { ?>
        <script language="javascript" type="text/javascript">
            jQuery(document).ready(function () {
                jQuery('#contactus').before("<hr class='confirmationhelpers'><p class='confirmationhelpers'>Your e-mail has been sent!<br/>Thank you! We'll contact you shortly.</p><hr class='confirmationhelpers'>");
            });
        </script>
    <?php
    }
    else { ?>
        <script language="javascript" type="text/javascript">
            jQuery(document).ready(function () {
                alert('It seems there\'s been an error. Please, send an email to example@email.com to request your appointment.');
            });
        </script>
    <?php
    }
}

?>

Just to be clear—when I click the Submit button, absolutely nothing happens.

回答1:

Your jQuery is blocking the form submit here:

//this hides the contact form if the overlay is clicked. children is there to prevent the children from also having this effect.
    $('.overlay_vertical_align').click(function() {
        $('.grey_overlay').fadeOut('slow');
    }).children().click(function(e) {
        return false;
    });

I mean, when I debug your site, and press the submit button, I reach the return false; above, after which the event processing is over.

回答2:

The reason nothing happens is that you use the new html5 'pattern' attribute which tries to regex validate your input before it even reaches your validate function. Remove the pattern attribute and try again.

来源：https://stackoverflow.com/questions/15520057/forms-input-type-submit-does-not-seem-to-trigger-the-onsubmit-handler

标签

javascript

html

forms

validation

onsubmit