Formular input type="submit" scheint nicht zum auslösen der onsubmit-handler

Ich bin versucht zu lösen eine javascript-Funktion, die per onsubmit zu bestätigen meine form.

Ich weiß, dass die Funktion an sich funktioniert, weil ich anrufen kann es innerhalb von script-tags direkt nach dem Formular-markup und ich bekomme meine Konsole.log-message und die Fehlermeldungen, die es schafft, auf dem Formular angezeigt.

PHP-Validierung an sich funktioniert, aber ich habe nur in der Lage gewesen, um tatsächlich senden Sie das Formular per javascript .submit platziert auf div. Offensichtlich weil dies umgeht jegliche client-seitige Validierung kann ich es nicht lassen, so, damit habe ich ersetzt meine div id="submit" mit einem input type="submit".

Habe ich andere Beispiele, einschließlich Formen, die ich codiert haben mich in der Vergangenheit, ich weiß, die Arbeit, und die scheinen völlig aus Antworten. Dies ist wahrscheinlich wahnsinnig einfach, und für einige Grund, ich kann nicht und habe nicht in der Lage, es zu sehen, für die letzten 6 Stunden. o_O

Hier ist mein Formular-markup:

<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"><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="[email protected]" 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>

Ich habe versucht, mehrere verschiedene Iterationen der onsubmit="return validateForm();"—mit oder ohne Semikolon zu schreiben als onSubmit oder onsubmit... ich weiß nicht. Ich kann nicht sehen, was falsch mit diesem überhaupt. Wer?

Unten ist die Funktion, die aufgerufen werden onsubmit, validateForm. Es befindet sich in einer anderen Datei, aber die Datei ist immer enthalten, wenn die form ist, und ich habe dafür gesorgt, diese Funktion ist nicht innerhalb $(document).ready und ist weltweit verfügbar, da habe ich die Bezeichnung aus innerhalb von script-tags direkt im Anschluss an das Formular.

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

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

    if (document.emailus.cf_email.value == "" || document.emailus.cf_email.value == "[email protected]") {
        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: Hinzugefügt, PHP Validierung/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 = '[email protected]';

    //final attempt at validation or email submission preventation
    if ($field_name == "Jane Doe" || empty($field_name) || $field_email == "[email protected]" || 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 == "[email protected]") && !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 [email protected] to request your appointment.');
            });
        </script>
    <?php
    }
}

?>

Nur klar zu sein—wenn ich auf den Submit-button passiert absolut gar nichts.

könntest du deinen post auf submit()
und validateForm
Versuchen Sie, und entfernen Sie return auf die onsubmit Wert, und setzen Sie einfach validateForm() oder, noch besser: validateForm(); return false; im Fall der ehemaligen nicht wieder eine truthy oder falsy-Wert. By the way, was ist die Verwendung von for auf den submit-input?
sicherzustellen, dass Ihre validateForm() return true bei erfolgreicher Validierung
entfernen Sie zuerst die for-Attribut im input[type=submit], die überprüfung der javascript-code sollte der nächste Schritt, aber stellen Sie sicher, es ist keine javascript-Anweisung, die Verhinderung der übermittlung, da Sie erwarten, dass eine Vorlage.

InformationsquelleAutor aminimalanimal | 2013-03-20

Schreibe einen Kommentar