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.
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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ihre jQuery blockiert das Formular Absenden hier:
Ich meine, wenn ich Debuggen Ihrer Website, und drücken Sie den Absenden-button Erreiche ich die
return false;
oben, nachdem die Verarbeitung der Ereignisse ist vorbei.onsubmit="return validateForm()"
wenn Sie möchten, dass Ihre validateForm Funktion, um in der Lage sein, um zu verhindern, dass ungültige Formulare aus übermittelt werden.Ihnen, sir, den Preis zu gewinnen. Darf ich Fragen, wie man debuggt es bis zu diesem level? Was browser oder tool du verwendest? Danke, dass du für mich immer auf dem richtigen Weg.
Ich benutzte Chrome die Entwicklertools (Strg+Shift+I), der script-debugger wird auf die 'Quellen' - Ansicht. Ich marginal lieber Internet Explorer Developer Tools (F12) step-Debuggen von JavaScript-code, aber in diesem Fall ist die Seite noch gar nicht geladen (IE8/XP) - außerdem ist es praktisch, um in der Lage sein, um debug-script in jedem browser. Also habe ich angehalten, alle Skript-Ausführung, klickte dann auf die Schaltfläche "senden", und trat durch den code (der jQuery-Interna sind nicht leicht zu Folgen, so dass ich nur gedrückt, step-in, bis ich endlich an Ihrem code).
Sehr cool. Hatte ich noch nicht herausgefunden, wie dieser Bereich noch. Und ja... herauszufinden, was Los ist mit dem IE ist die Aufgabe, die ich beheben können, nachdem diese ein. O_o (Obwohl ich vermute, es hat etwas zu tun mit der boilerplate, die ich verwendet habe.) Danke.
InformationsquelleAutor Lee Kowalkowski
Dem Grund nichts passiert ist, dass Sie die neuen html5 - "Muster" - Attribut, das versucht, zu regex überprüfen Sie Ihre Eingaben bevor Sie es erreicht Ihre Funktion validiert. Entfernen Sie das Attribut pattern und versuchen Sie es erneut.
pattern
- Attribut neben der javascript-Validierung vor und es hat nicht schien in die Quere kommen, obwohl ich mich nicht erinnern, dass Sie die Präzedenzfall irgendwann.InformationsquelleAutor Kenneth Solberg