Erstellen Sie ein ordentliches HTML5-Kontaktformular

() translation by (you can also view the original English article)

In diesem Tutorial erfahren Sie, wie Sie ein elegantes HTML5 AJAX-Kontaktformular erstellen. Das Formular verwendet einige der neuen HTML5-Eingabeelemente und -attribute und wird mithilfe der integrierten Formularvalidierung des Browsers überprüft.

Wir werden jQuery und Modernizr verwenden, um mit den älteren Browsern zu helfen, und PHP auf der Serverseite, um die Eingabe zu validieren.

Schritt 1: Erste Schritte

Um zu beginnen, müssen wir unser Verzeichnis und Dateien einrichten. Um zu beginnen, empfehle ich das HTML5-Muster. Dies ist ein wirklich guter Ausgangspunkt für jedes HTML5-Projekt und spart Ihnen viel Zeit. Für dieses Tutorial habe ich 'BOILERPLATE CUSTOM' gewählt.

Weitere Informationen zu HTML5 finden Sie in diesem Leitfaden auf Nettuts+.

Einmal heruntergeladen und entpackt, löschen Sie alles aber index.html und die Css und Js Ordner. Ich habe auch einen Ordner namens Img und eine PHP-Datei namens process.php. Wir verwenden den Img-Ordner zum Speichern von Bildressourcen für unsere Form und process.php, um alle Server-seitige Logik für das Kontaktformular zu behandeln. Hier ist, was jetzt meine Verzeichnisstruktur aussieht:

Das ist alles was, die wir brauchen um loszulegen! HTML5 Boilerplate beinhaltet eine tolle CSS mit sinnvollen Standardeinstellungen zurückgesetzt und alle JS Bibliotheken (jQuery & Modernizr) werden wir heute verwenden. Alle unsere JS-Dateien und CSS-Dateien haben in der Indexdatei eingehakt. Nun ist es Zeit, mit dem Markup fortzufahren.

Schritt 2: Das Formular

Öffnen Sie index.html und entfernen Sie alles innerhalb des Elements #container. Wir setzen unser Kontaktformular innerhalb dieses Div:

<div id="contact-form" class="clearfix">
    <h1>Get In Touch!</h1>
    <h2>Fill out our super swanky HTML5 contact form below to get in touch with us! Please provide as much information as possible for us to help you with your enquiry :)</h2>
    <ul id="errors" class="">
        <li id="info">There were some problems with your form submission:</li>
    </ul>
    <p id="success">Thanks for your message! We will get back to you ASAP!</p>
    <form method="post" action="process.php">
        <label for="name">Name: <span class="required">*</span></label>
        <input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" autofocus="autofocus" />
        
        <label for="email">Email Address: <span class="required">*</span></label>
        <input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
        
        <label for="telephone">Telephone: </label>
        <input type="tel" id="telephone" name="telephone" value="" />
        
        <label for="enquiry">Enquiry: </label>
        <select id="enquiry" name="enquiry">
            <option value="general">General</option>
            <option value="sales">Sales</option>
            <option value="support">Support</option>
        </select>
        
        <label for="message">Message: <span class="required">*</span></label>
        <textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
        
        <span id="loading"></span>
        <input type="submit" value="Holla!" id="submit-button" />
        <p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
    </form>
</div>

Dies ist alles HTML, das wir für unser Formular benötigen. Schauen wir uns jeden einzelnen Abschnitt:

UL #errors und p #success Willen werden Halterungen für unsere Fehler und Erfolg-Nachrichten. Wir werden diese standardmäßig mit CSS verstecken und zeigt sie mit JavaScript oder PHP, sobald das Formular abgesendet wurde. Für die Namenseingabe ist unsere einzige Voraussetzung, dass es ausgefüllt wurde.

Das tun wir in HTML5 indem man das "required"-Attribut. Dies zwingt den Browser zu prüfen, ob dieses Feld etwas drin, hat bevor das Formular eingereicht werden kann. Das e-Mail-Feld ist ähnlich, aber auch als erforderlich ist, wollen wir eigentlich sicherstellen, dass die eingegebene e-Mail-Adresse ist. Um dies zu tun, geben wir diesen Eingang als e-Mail, die neu in HTML5 ist. Telefon ist, zwar kein erforderliches Feld nutzen wir die tel HTML5 Eingabetyp dafür.

Anfrage ist ein standard select Element und Botschaft ist eine typische Textarea--nichts neues hier. Im Textbereich setzen wir das erforderliche Attribut, um sicherzustellen, dass der Benutzer Text eingibt.

In HTML5 gibt es ein neues Attribut für Textbereiche, das als Maxlength bezeichnet wird. Ja, Sie haben es erraten, damit können wir eine maximale Anzahl von Zeichen festlegen, die wir in den Textbereich schreiben können. Irgendwie bescheuert dachte die Mächte, die sein, die aus der HTML5-Spezifikation nicht bräuchten wir ein Minlength-Attribut (wie wir es jetzt tun) und es gibt kein Attribut dafür. Also als provisorische Minlength Attribut, wollen wir eine weitere neue HTML5 Attribut mit dem Namen einer benutzerdefinierten Data-Attribut verwenden. Dies ist im Grunde alle Attributnamen mit dem Wort "Daten-" vorangestellt. In unserem Fall haben wir Daten-Minlength passend gewählt. Dadurch können wir im Wesentlichen unsere eigene Attribute erstellen.

Beachtenswert ist, dass wir ein Attribut namens Platzhalter auf alle input-Elemente (außer Telefon) und die Textarea setzen. Dies ist ein neues HTML5 input-Attribut. Wenn das Formular zuerst angezeigt wird, wird der Platzhaltertext in der Eingabe, normalerweise in einer anderen Schriftfarbe angezeigt. Dann, wenn Sie die Eingabe konzentrieren, der Platzhaltertext verschwindet. Wenn Sie ohne füllen das Feld in verwischen, wird der Platzhaltertext zurück gesetzt. Dies ist ein ziemlich cooler Effekt, und bieten den Benutzer mit ein bisschen mehr Informationen auf was sie tun müssen. Dies hätte früher mit JavaScript zu tun.

Die letzte Sache zu beachten ist, dass die Namenseingabe HTML5 Attribut namens Autofokus. Beim ersten Laden der Seite erhält dieses Eingabeelement sofort den Fokus, ohne dass der Benutzer etwas tun muss. Das ist auch gut für Benutzeraufforderung, etwas zu tun.

Das ist alle HTML5-Ness, die wir in unserem Markup integrieren wollen. Für nähere Informationen zu diesen neuen Attributen und Eingänge Kasse einige von diesen links:

Schritt 3: Styling Form

Hier ist unser Formular, tragen Sie ein wenig schlechter suchen...

Es sieht nicht so gut im Moment, und ist es nicht wirklich tut unserer glänzenden neuen HTML5-Güte irgendeine Gerechtigkeit, also lassen Sie uns einige CSS hinzufügen. Öffnen Sie die Datei style.css. Die Datei enthält bereits einige Resets und Standardwerte, die uns helfen unsere Form X-Browser kompatibel machen. Scrollen Sie nach unten und suchen Sie nach Kommentar sagt:

1	/*
2	// ========================================== \\
3	\|\| \|\|
4	\|\| Your styles ! \|\|
5	\|\| \|\|
6	\\ ========================================== //
7	*/

Fügen Sie direkt dahinter ein, im folgenden CSS:

#contact-form {
    background-color:#F2F7F9;
    width:465px;
    padding:20px;
    margin: 50px auto;    
    border: 6px solid #8FB5C1;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    position:relative;
}

#contact-form h1 {
    font-size:42px;
}

#contact-form h2 {
    margin-bottom:15px;
    font-style:italic;
    font-weight:normal;
}

#contact-form input, 
#contact-form select, 
#contact-form textarea, 
#contact-form label {
    font-size:15px;
    margin-bottom:2px;
}

#contact-form input, 
#contact-form select, 
#contact-form textarea {
    width:450px;
    border: 1px solid #CEE1E8;
    margin-bottom:20px;
    padding:4px;
}

#contact-form input:focus, 
#contact-form select:focus, 
#contact-form textarea:focus {
    border: 1px solid #AFCDD8;
    background-color: #EBF2F4;
}

#contact-form textarea {
    height:150px;
    resize: none;
}

#contact-form label {
    display:block;
}

#contact-form .required {
    font-weight:bold;
    color:#F00;    
}

#contact-form #submit-button {
    width: 100px;
    background-color:#333;
    color:#FFF;
    border:none;
    display:block;
    float:right;
    margin-bottom:0px;
    margin-right:6px;
    background-color:#8FB5C1;
    -moz-border-radius:8px;
}

#contact-form #submit-button:hover {
    background-color: #A6CFDD;
}

#contact-form #submit-button:active {
    position:relative;
    top:1px;
}

#contact-form #loading {
    width:32px;
    height:32px;
    background-image:url(../img/loading.gif);
    display:block;
    position:absolute;
    right:130px;
    bottom:16px;
    display:none;
}

#errors {
    border:solid 1px #E58E8E;
    padding:10px;
    margin:25px 0px;
    display:block;
    width:437px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    background:#FFE6E6 url(../img/cancel_48.png) no-repeat 405px center;
    display:none;
}

#errors li {
    padding:2px;
    list-style:none;    
}

#errors li:before {
    content: ' - ';    
}

#errors #info {
    font-weight:bold;
}

#errors #info:before {
    content: '';    
}

#success {
    border:solid 1px #83D186;
    padding:25px 10px;
    margin:25px 0px;
    display:block;
    width:437px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    background:#D3EDD3 url(../img/accepted_48.png) no-repeat 405px center;
    font-weight:bold;
    display:none;
}

#errors.visible, #success.visible {
    display:block;    
}

#req-field-desc {
    font-style:italic;
}

/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */
input:required, textarea:required {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}

/* Normalize placeholder styles */

/* chrome, safari */
::-webkit-input-placeholder {
    color:#CCC;
    font-style:italic;
}

/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
    color:#CCC;
    font-style:italic;
}

/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text  { 
    color:#CCC;
    font-style:italic;
}

Wenn Sie speichern und laden, sollte Ihre Seite jetzt so aussehen:

Das sieht jetzt besser aus! Die CSS ist ziemlich standard, aber ich werde gehen über ein paar Dinge, die nicht so offensichtlich sind:

1	#errors li:before {
2	content: ' - ';
3	}

Dies wird einen Bindestrich neben unseren Validierung Fehlermeldungen setzen. Es ist im Grunde den Punkt in der Liste ersetzen, ich denke, das sieht besser aus.

1	#contact-form #submit-button:active {
2	position:relative;
3	top:1px;
4	}

Diese geben uns einen schönen "Push-Down"-Effekt, wenn die Schaltfläche "senden" aktiviert ist.

input:required, textarea:required {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}

Alle Browser (außer IE) standardmäßig setzen einen rotes Feld Schatten erforderlichen Elemente. Dies sieht ein bisschen übertrieben meiner Meinung nach, so dass ich es bin entfernen. Ich habe bereits darauf hingewiesen, dass das Feld erforderlich ist, indem man ein rotes Sternchen auf dem Etikett.

/* chrome, safari */
::-webkit-input-placeholder {
    color:#CCC;
    font-style:italic;
}

/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
    color:#CCC;
    font-style:italic;
}

/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text  { 
    color:#CCC;
    font-style:italic;
}

Dies normalisiert sich das Erscheinungsbild der Platzhaltertext auf Eingaben und verarbeitet. Hier machen wir es ein helles grau und Italic es. Diese geben uns Konsistenz in allen Browsern außer Opera, der das Styling der Platzhalter nicht unterstützt. IE nur unterstützt nicht das Platzhalter-Attribut. Fullstop. Wir werden JavaScript, Polyfill dies verwenden. Erfahren Sie mehr über styling HTML5-Formulare mit CSS (2.1 + 3) hier.

Sie werden in der CSS feststellen, dass es ein paar Verweise auf Bilder. Wenn Sie diese nicht haben, einfach herunterladen Sie die Quelldateien für dieses Tutorial und kopieren Sie sie über.

Wir sind fertig mit dem Markup, und es sieht ziemlich süß. Wir wollen eine PHP fallback zu schaffen, für den Fall, dass der Browser des Benutzers neue Form Eingabeattribute (IE) nicht unterstützt, oder wenn der Benutzer JavaScript deaktiviert hat. Wir wollen einige JavaScript Funktionen später in Polyfill schreiben dem Browser fehlt. Aber sofern der Benutzer verfügt nicht über einen schön glänzenden neuen Browser oder JavaScript aktiviert, müssen wir noch die Übermittlung des Formulars zu überprüfen. Wir werden diese Architekturbetrachtung mit PHP tun. Auch werden wir es verwenden, um uns die Ergebnisse der gültige Form per e-Mail.

Schritt 4: Vorbereitung für die Server-Seite-Validierung

Fangen wir gleich an. Process.php öffnen Sie und fügen Sie in die folgenden:

<?php
if( isset($_POST) ){
    
    //form validation vars
    $formok = true;
    $errors = array();
    
    //sumbission data
    $ipaddress = $_SERVER['REMOTE_ADDR'];
    $date = date('d/m/Y');
    $time = date('H:i:s');
    
    //form data
    $name = $_POST['name'];    
    $email = $_POST['email'];
    $telephone = $_POST['telephone'];
    $enquiry = $_POST['enquiry'];
    $message = $_POST['message'];
    
    //form validation to go here....
    
}

Was wir hier sagen, ist: dieser folgenden Code nur ausgeführt, wenn die Anforderungsmethode POST ist. Wenn ein Formular an ein PHP-Skript geschrieben ist, sind standardmäßig das Formular eingegebenen Werte in ein super globales Array namens $_POST gespeichert. Wenn nichts gebucht wird, $_POST werden kein Array der Anweisung wird auf False gleichzusetzen und unseren Code wird nicht ausgeführt.

Nachdem wir festgestellt haben, dass dies eine POST-Anforderung ist, können wir unser Formular Verarbeitungslogik beginnen. Das erste, was, das wir tun müssen, ist zwei Variablen gesetzt:

$ formok: Ein boolescher Wert, den wir prüfen können, ob das Formular am Ende des Skripts gültig ist oder nicht.
$ errors: Ein Array, das wir zum Speichern aller Probleme mit dem Formular verwenden werden, während wir es überprüfen.

Danach haben wir einige allgemeine Form Vorlage Daten:

$ipaddress: die IP-Adresse, die für eine schwarze Liste Spam, Querverweise Analytics-Daten etc. nützlich sein kann.
$date: das Datum, das Formular abgesendet wurde. Wir verwenden die Datumsfunktion, um das Datum im UK-Format zu generieren.
$time: die Zeit, die das Formular abgesendet wurde. Wir verwenden die Datumsfunktion, um die Zeit zu generieren.

Wir konnten das Datum und die Uhrzeit verbinden, wenn wir wollten:

1	$datetime = date('d/m/Y H:i:s');

Ich möchte sie getrennt halten damit ich sie für andere Dinge verwenden können, falls erforderlich. Der letzte Satz von Variablen, die wir stellen sind die Werte der eingereichten Formularfelder. Wir sind das $_POST Array vorbei in das Feld Formularname als Schlüssel zum Abrufen der Daten für die einzelnen Variablen zugreifen.

Schritt 5: Validierung der $_POST Daten

Wir wollen jede Variable einzeln jetzt zu überprüfen, um sicherzustellen, dass ihr Wert gültig ist. Wenn es nicht ist, wir die $formok-Variable auf False gesetzt, und eine Fehlermeldung in der $errors Array speichern. Wir beginnen zunächst mit dem Feld "Name".

//validate name is not empty
if(empty($name)){
    $formok = false;
    $errors[] = "You have not entered a name";
}

Hier sind wir nur sicherstellen, dass diese $name verfuegt ueber einen Wert. Wenn dies nicht der Fall, bedeutet dies, dass der Benutzer keinen Namen eingegeben haben. Wir verwenden die empty() Funktion, um dies zu überprüfen. Nach $errors [] enthalten ist eine Verknüpfung mit Array_push (die verwendet wird, um ein Element an das Ende eines Arrays hinzufügen). Als nächstes werden wir die e-Mail-Adresse bestätigen:

//validate email address is not empty
if(empty($email)){
    $formok = false;
    $errors[] = "You have not entered an email address";
//validate email address is valid
}elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
    $formok = false;
    $errors[] = "You have not entered a valid email address";
}

Wir wollen prüfen, um festzustellen, ob tatsächlich eine gültige e-Mail-Adresse eingegeben wurde. Für diese Aufgabe wollen wir die filter_var()-Funktion verwenden. Zu guter Letzt müssen wir die Meldung zu bestätigen.

//validate message is not empty
if(empty($message)){
    $formok = false;
    $errors[] = "You have not entered a message";
}
//validate message is greater than 20 charcters
elseif(strlen($message) < 20){
    $formok = false;
    $errors[] = "Your message must be greater than 20 characters";
}

Wir werden noch einmal überprüfen, ob eine Nachricht eingegeben wurde. Wenn etwas eingegeben wurde, möchten wir sicherstellen, dass es länger als 20 Zeichen ist. Dafür wollen wir die Funktion strlen() verwenden.

Das Telefon und das Anfrage-Feld sind keine Pflichtfelder, so dass keine Notwendigkeit, diese zu validieren. Du könntest, wenn du wolltest, aber für die Zwecke dieses Tutorial ich nicht bin.

Schritt 6: Was Sie als nächstes tun...

Sobald wir unsere Formularergebnisse überprüft haben, müssen wir entscheiden, ob der Benutzer eine e-Mail mit den Formularergebnissen oder nicht senden. Wir behalten den Überblick über die Gültigkeit des Formulars über die $formok-Variable. Wenn es immer noch gleich ist wahr, wir wollen die Formularergebnisse vorzulegen, andernfalls nicht.

Das ist die Logik, die werden wir nutzen, um die Nachricht zu senden (fügen Sie in diesem, nachdem wir unsere Validierung getan haben):

//send email if all is ok
if($formok){
    $headers = "From: info@example.com" . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
    
    $emailbody = "<p>You have recieved a new message from the enquiries form on your website.</p>
                  <p><strong>Name: </strong> {$name} </p>
                  <p><strong>Email Address: </strong> {$email} </p>
                  <p><strong>Telephone: </strong> {$telephone} </p>
                  <p><strong>Enquiry: </strong> {$enquiry} </p>
                  <p><strong>Message: </strong> {$message} </p>
                  <p>This message was sent from the IP Address: {$ipaddress} on {$date} at {$time}</p>";
    
    mail("enquiries@example.com","New Enquiry",$emailbody,$headers);
    
}

Um die Nachricht zu senden, werden wir die mail() Funktion verwendet werden. Wir müssen diese Funktion vier Parameter übergeben: Betreff, Nachricht und Header.

zu: Dies wird die e-Mail-Adresse, die Sie möchten, senden Sie das Formular Details zu sein.
Thema: das werden der Betreffzeile.
Nachricht: Dies wird sein, den Inhalt der e-Mails. Wir werden dies in der Variablen $emailbody gespeichert. Dies ist eine HTML-Zeichenfolge enthält die Ergebnisse der unser Formular. Wo sehen Sie die geschweiften Klammern mit unserer Variablennamen in ihnen, werden diese in den Variablen Wert geändert werden, wenn das Skript ausgeführt wird. Dies nennt man Variablensubstitution. Diese Art der Substitution funktioniert nur, wenn die Zeichenfolge in Anführungszeichen gekapselt ist, nicht einzelne.
Header: wird verwendet, um zusätzliche Informationen an die e-Mail-Client übergeben, damit es weiß, wie man die e-Mail interpet. Wir sind unseren Header in die $headers Variable speichern und liefert zusätzliche Informationen über wem die e-Mail stammt und welche Art von Inhalten, die es enthält.

Hinweis: Vergessen Sie nicht, die von e-Mail-Adresse in den Headern und die e-Mail-Adresse in der e-Mail-Funktion.

Dies soll eine nette e-Mail wie folgt:

Wenn Sie auf einem WindowsServer sind, müssen Sie diese Codezeile in setzen (bevor Sie die $headers Variable deklarieren) an um die Mail-Funktion zu erhalten:

1	ini_set("sendmail_from","info@example.com");

Ob Formularübertragung des Benutzers gültig oder nicht war, wollen wir sie zurück zum Formular zurückzukehren. Wenn das Formular gültig war und die Nachricht wurde gesendet, müssen wir dem Benutzer die Erfolgsmeldung geben. Wenn es nicht gültig ist, wollen wir die Fehlermeldungen gespeichert im $errors Array anzeigen sowie füllen Sie die Formularfelder mit den Daten, die ursprünglich gesendet wurde. Wir werden einige Variablen speichern, die wir haben in diesem Skript in einem Array mit und senden sie zusammen mit der Umleitung zurück zum Formular.

//what we need to return back to our form
$returndata = array(
    'posted_form_data' => array(
        'name' => $name,
        'email' => $email,
        'telephone' => $telephone,
        'enquiry' => $enquiry,
        'message' => $message
    ),
    'form_ok' => $formok,
    'errors' => $errors
);

Wir werden unsere Daten in ein assoziatives Array zu speichern. Dieses Array hat drei Mitglieder:

posted_form_data: Dies ist ein Array mit den Formulardaten, die an das Skript gesendet wurden.
form_ok: Wir speichern die $ formokVariable in dieser Datei und diese Variable wird auf der Formularseite erneut geprüft, um den Benutzer mit der entsprechenden Nachricht zu aktualisieren.
Fehler: Wir speichern die $errors Variable in diesem. Diese Variable wird verwendet, wenn die $formokVariable gleich false ist.

Die letzte Sache für uns zu tun ist, den Benutzer wieder auf die Formularseite, zusammen mit unserer $returndata Reihe umzuleiten. Sobald wir wieder auf der Formularseite weitergeleitet werden, verlieren wir unsere $returndata Variable; damit, um diese Daten persistent zu machen, wir vorübergehend in der Session gespeichert wird.

Ein weiterer Aspekt, den wir berücksichtigen müssen, ist letztlich, wenn der Browser des Benutzers JavaScript aktiviert hat, möchten wir das Formular über AJAX absenden Das bedeutet, dass wollen wir unsere AJAX-Request an der gleichen Stelle wie die Übermittlung des Formulars gebucht werden, wenn JavaScript deaktiviert ist. Da die Form bereits auf der Clientseite überprüft wurden würde, es kommen durch die serverseitige Validierung und Details werden per e-Mail an uns. Wenn das Formular nicht gültig ist, wird es nie eingereicht werden (als Browser Validierung / JavaScript wird es verhindern). Dies bedeutet, dass mit der AJAX-Request, gibt es keinen Grund für uns, umleiten oder legen Sie Session-Variablen. Im letzten Teil dieses Skripts überprüfen wir, ob die aktuelle Anforderung an process.php eine AJAX-Anfrage war oder nicht, und wenn es unsere Session-Variablen gesetzt wurde, und umleiten.

//if this is not an ajax request
if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest'){
    
    //set session variables
    session_start();
    $_SESSION['cf_returndata'] = $returndata;
    
    //redirect back to form
    header('location: ' . $_SERVER['HTTP_REFERER']);

}

Um zu überprüfen, ob dies eine AJAX-Anfrage, suchen wir für die Variable $_SERVER ['HTTP_X_REQUESTED_WITH']. Wie die super global $_POST Array, gibt es auch eine sogenannte $_SERVER. Dieses Array enthält Server und Ausführung Umgebungsinformationen. Weitere Informationen finden Sie hier.

Wir rufen Sie dann Aufruf von session_start() um uns Zugriff auf die Sitzung und der Satz der Variable $_SESSION ['Cf_returndata'], $returndata zu spiegeln. Auf der Formularseite werden wir nun auf diese Variable zugreifen.

Um zurück zum Formular umzuleiten, verwenden wir die header() Funktion. Wir sagen es uns auf der letzten Seite umleiten wir kamen von der Verwendung der Variablen: $_SERVER ['HTTP_REFERER'].

Insgesamt landete Sie dabei haben sollten:

<?php
if( isset($_POST) ){
    
    //form validation vars
    $formok = true;
    $errors = array();
    
    //submission data
    $ipaddress = $_SERVER['REMOTE_ADDR'];
    $date = date('d/m/Y');
    $time = date('H:i:s');
    
    //form data
    $name = $_POST['name'];    
    $email = $_POST['email'];
    $telephone = $_POST['telephone'];
    $enquiry = $_POST['enquiry'];
    $message = $_POST['message'];
    
    //validate form data
    
    //validate name is not empty
    if(empty($name)){
        $formok = false;
        $errors[] = "You have not entered a name";
    }
    
    //validate email address is not empty
    if(empty($email)){
        $formok = false;
        $errors[] = "You have not entered an email address";
    //validate email address is valid
    }elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
        $formok = false;
        $errors[] = "You have not entered a valid email address";
    }
    
    //validate message is not empty
    if(empty($message)){
        $formok = false;
        $errors[] = "You have not entered a message";
    }
    //validate message is greater than 20 characters
    elseif(strlen($message) < 20){
        $formok = false;
        $errors[] = "Your message must be greater than 20 characters";
    }
    
    //send email if all is ok
    if($formok){
        $headers = "From: info@example.com" . "\r\n";
        $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
        
        $emailbody = "<p>You have received a new message from the enquiries form on your website.</p>
                      <p><strong>Name: </strong> {$name} </p>
                      <p><strong>Email Address: </strong> {$email} </p>
                      <p><strong>Telephone: </strong> {$telephone} </p>
                      <p><strong>Enquiry: </strong> {$enquiry} </p>
                      <p><strong>Message: </strong> {$message} </p>
                      <p>This message was sent from the IP Address: {$ipaddress} on {$date} at {$time}</p>";
        
        mail("enquiries@example.com","New Enquiry",$emailbody,$headers);
        
    }
    
    //what we need to return back to our form
    $returndata = array(
        'posted_form_data' => array(
            'name' => $name,
            'email' => $email,
            'telephone' => $telephone,
            'enquiry' => $enquiry,
            'message' => $message
        ),
        'form_ok' => $formok,
        'errors' => $errors
    );
        
    
    //if this is not an ajax request
    if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest'){
        //set session variables
        session_start();
        $_SESSION['cf_returndata'] = $returndata;
        
        //redirect back to form
        header('location: ' . $_SERVER['HTTP_REFERER']);
    }
}

Das ist alles für die Verarbeitung unserer Formularübertragung--getan und in 90 Zeilen PHP abgestaubt! Alles, was wir tun müssen, jetzt ist den Benutzer aktualisieren und geben Sie entweder eine Erfolgsmeldung oder eine Fehlermeldung angezeigt. Sie sparen jetzt process.php.

Schritt 7: Aktualisieren der UI

Nun, wir die Formulardaten verarbeitet haben und zur Seite zurückgegeben wurden, müssen wir aktualisieren den Benutzer was passiert ist. Das bedeutet Zugriff auf die Session-Variable setzen wir auf process.php und arbeiten heraus, welche Antwort zu geben. Da diese Seite nun PHP verwenden muss, werden wir brauchen, um die Datei-Endung von index.html in .php ändern (index.html = index.php). Keine Sorge, dies sollte nicht kaputt machen, was wir bereits getan haben.

Das erste, was, das wir tun müssen, ist unsere Variablen aus der Sitzung erhalten. Um dies zu tun, brauchen wir Zugriff auf die Sitzung. Ganz oben auf der Seite vor jeder Markup (oberhalb Doctype) fügen Sie den folgenden Code in:

1	<?php session_start() ?>

Beginn der Tagung vor jeder Inhalt an den Browser gesendet wird sollte verhindern, dass "kann nicht Session Cookie - Headers already sent durch... senden" Fehler, die Sie erhalten können. Unterhalb der H2 des Formulars fügen Sie in dieser PHP-Schnipsel hinzu:

<?php
//init variables
$cf = array();
$sr = false;

if(isset($_SESSION['cf_returndata'])){
    $cf = $_SESSION['cf_returndata'];
    $sr = true;
}
?>

Wir sind zwei Variablen auf Standardwerte festlegen. Mehr über diese später... Wir überprüfen dann, ob $_SESSION ['Cf_returndata'] festgelegt ist. Wir setzen dann $cf (Abkürzung für Kontaktformular) zu unserer Session-Variable gleich. Dies ist nur damit wir nicht $_SESSION eingeben zu müssen... Jedes Mal, wenn wir auf diese Daten zugreifen möchten. Die letzte Variable $sr (kurz Antwort des Servers), festgelegt auf True. Dies ist eine Variable, die wir überprüft werden, ob wir unser Formular vorher gebucht haben werden. Das nächste, was, das wir tun wollen, wird eine Fehlermeldung oder Erfolg am oberen Rand des Formulars angezeigt. Ersetzen Sie dies:

1	<ul id="errors" class="">
2	<li id="info">There were some problems with your form submission:</li>
3	</ul>
4	<p id="success">Thanks for your message! We will get back to you ASAP!</p>

Mit diesem:

<ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
    <li id="info">There were some problems with your form submission:</li>
    <?php 
    if(isset($cf['errors']) && count($cf['errors']) > 0) :
        foreach($cf['errors'] as $error) :
    ?>
    <li><?php echo $error ?></li>
    <?php
        endforeach;
    endif;
    ?>
</ul>
<p id="success" class="<?php echo ($sr && $cf['form_ok']) ? 'visible' : ''; ?>">Thanks for your message! We will get back to you ASAP!</p>

In der Standardeinstellung die Nachrichten erscheinen nicht überhaupt weil im CSS, wir eingerichtet haben "anzeigen: keine". PHP nutzen wir im Inneren das Class-Attribut der Nachrichten fügen Sie eine Klasse "sichtbare" zu ihnen, wenn sie angezeigt werden sollen. Diese Klasse setzt 'display' auf 'Block'.

1	<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>

Wir verwenden hier die ternären Operator zu überprüfen, ob...

(a) die Antwort des Servers ist gleich wahr und
(b), dass das Formular nicht in Ordnung war

Im Wesentlichen, wenn wir das Formular abgeschickt haben, wird $sr wahr gleich, und wenn das Formular ungültig war $cf ['Form_ok'] wird gleich falsch. So wird die Klasse sichtbar ausgegeben werden, aber die PHP und die Nachricht werden angezeigt, und umgekehrt für die Erfolgsmeldung. Innerhalb der Klammer prüfen wir die Werte der beiden Variablen. Wir prüfen, ob $ sr gleich true ist und (&&) $ cf ['fomr_ok'] gleich false ist. Wir sind Kurzschrift verwenden, um diese Werte zu überprüfen. Sie können es auch so schreiben, wenn man wollte:

1	<?php echo ($sr === true && $cf['form_ok'] === false) ? 'visible' : ''; ?>

Nachdem wir entschieden haben, welche Nachricht angezeigt werden soll, müssen wir den Container mit den relevanten Daten füllen. Die Erfolgsmeldung ändert sich nicht, so dass wir das so belassen können. Die Fehlermeldung benötigen die Überprüfungsfehler auffüllen. Diese aus, schreiben wir unsere Fehler-Array in der Session gespeichert und bevölkern ein li Element innerhalb der Ul einfach durchlaufen werden:

<ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
    <li id="info">There were some problems with your form submission:</li>
    <?php 
    if(isset($cf['errors']) && count($cf['errors']) > 0) :
        foreach($cf['errors'] as $error) :
    ?>
    <li><?php echo $error ?></li>
    <?php
        endforeach;
    endif;
    ?>
</ul>

Wir prüfen zunächst, dass wir unsere Fehler-Array in $cf und, dass es mindestens einen Fehler enthält. If und Foreach Anweisung möglicherweise ein wenig anders, wie Sie sie vorher gesehen zu haben. Dies nennt man Alternative Syntax. Wir haben hier alternative Syntax verwendet, nur um es mit es vermischt mit den HTML-Code etwas lesbarer zu machen. Sie können die normalen Syntax verwenden, aber wenn Sie möchten, es ist bis auf Präferenz.

Das ist alles was, die wir brauchen, für zeigt dem Benutzer die Antwort für die Übermittlung des Formulars. Um dies zu testen, deaktivieren Sie JavaScript zu, und senden Sie das Formular. Denken Sie daran, dass der Browser das Formular zu bestätigen, wie wir die neuen HTML5-Elemente verwenden. Also um super sicher sein mein PHP funktioniert, bin ich in IE8 testen. Ja, das ist richtig, IE kommt handliches manchmal...

Wenn Sie das ungültige Formular abschicken, erhalten Sie dies:

Und wenn Sie das Formular korrekt ausfüllen, erhalten Sie:

Sie sollten auch eine e-Mail aus dem Code erhalten haben schrieben wir früher (wenn Sie das Formular korrekt ausgefüllt). Nun, da das Formular funktioniert, ist das letzte, was, das wir tun müssen, die Formularfelder wieder mit Daten des Benutzers zu füllen, wenn die Vorlage ungültig war. Tauschen Sie den HTML-Code innerhalb des Form-Tags dafür:

<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>" placeholder="John Doe" required="required" autofocus="autofocus" />

<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['email'] : '' ?>" placeholder="johndoe@example.com" required="required" />

<label for="telephone">Telephone: </label>
<input type="tel" id="telephone" name="telephone" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['telephone'] : '' ?>" />

<label for="enquiry">Enquiry: </label>
<select id="enquiry" name="enquiry">
    <option value="General" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'General') ? "selected='selected'" : '' ?>>General</option>
    <option value="Sales" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'Sales') ? "selected='selected'" : '' ?>>Sales</option>
    <option value="Support" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'Support') ? "selected='selected'" : '' ?>>Support</option>
</select>

<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"><?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['message'] : '' ?></textarea>

<span id="loading"></span>
<input type="submit" value="Holla!" id="submit-button" />
<p id="req-field-desc"><span class="required">*</span> indicates a required field</p>

Der einzige Unterschied ist, dass wir PHP verwenden, um das Value-Attribut der Eingänge zu füllen.

1	<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>

Wie wir mit Erfolg und Fehler Nachrichten, prüfen wir, ob $sr gleich true ist und $cf ['Form_ok'] gleich auf False ist, und wenn sie sind, wir den gespeicherten Wert in der Sitzung für dieses Formularfeld schreiben. Dies geschieht mit dem ternären Operator.

Wählen Sie auf der wir tun das gleiche, außer, anstelle von den gespeicherten Wert, müssen wir überprüfen jeden Optionswert zu sehen, ob es der in der Sitzung gespeicherte übereinstimmt. Wenn es passt, schreiben wir das ausgewählte Attribut für diese Option.

Schließlich eine letzte Sache, die wir tun wollen ist unset dieser Session-Variable, nachdem wir unsere Daten von ihm bekommen haben. Du musst dazu aber; Es kommt auf die Vorlieben. Durch entfernen es jetzt, wenn die Seite, über die Schaltfläche "aktualisieren" (nicht Formularbereitstellung), ein Fehler aktualisiert wird / Erfolgsmeldung wird nicht angezeigt. Wenn Sie nicht festgelegt haben, ein Benutzer könnte füllen das Kontaktformular aus, gehen werkeln im Internet, kommen zurück zu der Form und der Fehler / Erfolgsmeldung wird immer noch angezeigt werden. Ich mag dies nicht, so werde ich es verhindern, indem Sie diese Zeile PHP setzen, kurz nach der Schließung Form Stichwörter:

1	<?php unset($_SESSION['cf_returndata']); ?>

Wenn Sie eine ungültige Formular abschicken, sollten Sie bemerken jetzt, dass Ihr Formular eingegebenen Werte erhalten bleiben, und wenn Sie die Seite Referesh, die Nachricht und Daten gelöscht werden soll. Das war es für die PHP-Seite der Dinge! Sie sollten mit Ihrer Form suchen Like also gelandet:

<div id="contact-form" class="clearfix">
    <h1>Get In Touch!</h1>
    <h2>Fill out our super swanky HTML5 contact form below to get in touch with us! Please provide as much information as possible for us to help you with your enquiry :)</h2>
    <?php
    //init variables
    $cf = array();
    $sr = false;
    
    if(isset($_SESSION['cf_returndata'])){
        $cf = $_SESSION['cf_returndata'];
        $sr = true;
    }
    <ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
        <li id="info">There were some problems with your form submission:</li>
        <?php 
        if(isset($cf['errors']) && count($cf['errors']) > 0) :
            foreach($cf['errors'] as $error) :
        ?>
        <li><?php echo $error ?></li>
        <?php
            endforeach;
        endif;
        ?>
    </ul>
    <form method="post" action="process.php">
        <label for="name">Name: <span class="required">*</span></label>
        <input type="text" id="name" name="name" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>" placeholder="John Doe" required autofocus />
        
        <label for="email">Email Address: <span class="required">*</span></label>
        <input type="email" id="email" name="email" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['email'] : '' ?>" placeholder="johndoe@example.com" required />
        
        <label for="telephone">Telephone: </label>
        <input type="tel" id="telephone" name="telephone" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['telephone'] : '' ?>" />
        
        <label for="enquiry">Enquiry: </label>
        <select id="enquiry" name="enquiry">
            <option value="General" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'General') ? "selected='selected'" : '' ?>>General</option>
            <option value="Sales" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'Sales') ? "selected='selected'" : '' ?>>Sales</option>
            <option value="Support" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'Support') ? "selected='selected'" : '' ?>>Support</option>
        </select>
        
        <label for="message">Message: <span class="required">*</span></label>
        <textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required data-minlength="20"><?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['message'] : '' ?></textarea>
        
        <span id="loading"></span>
        <input type="submit" value="Holla!" id="submit-button" />
        <p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
    </form>
    <?php unset($_SESSION['cf_returndata']); ?>
</div>

Vergessen Sie nicht den Aufruf von session_start() ganz oben auf der Seite! Wir haben jetzt ein voll funktionsfähiges Kontaktformular.

Die Daten überprüft, und wenn dies gelingt, werden wir die Formularergebnissen per e-Mail zugesendet. Darüber hinaus aktualisieren wir die Benutzeroberfläche mit den Ergebnissen für jede Einreichung. Die neueren Browsern werden sogar Form validieren, bevor es gesendet wird, mithilfe der neuen HTML5 input-Typen und Attribute, die wir verwendet haben.

Das ist alles schön und gut können, aber wir noch einen Schritt weiter. JavaScript können, Polyfill Funktionen wir, die der Browser keinen (Baujahr Validierung, Unterstützung für HTML5 Attribute etc..). Wir können sogar JavaScript verwenden, um unsere Fehler- / Erfolgsmeldungen anzuzeigen und das Formular mit AJAX zu senden.

Aber warum tun, wenn das Formular bereits funktioniert? Nun, ist es einfach. Wir wollen so viel Übereinstimmung in allen Browsern wie möglich zur Verfügung zu stellen, auch wenn es einem wirklich naff Browser. Auch, wenn man den Browser des Clients aller Validierungsarbeiten spart Ressourcen des Servers wie wir nicht zu veröffentlichen, wenn das Formular nicht gültig ist. Diese Dinge sind super bräunlich Punkte und sind nicht wirklich schwer zu tun.

Schritt 8: Was ist ein Polyfill?

"Ein Polyfill oder Polyfiller, ist ein Stück Code, die die Technologie bietet, die Sie als Entwickler, den Browser nativ zu erwarten."

In unserem Fall erwarten wir den Browser zur Unterstützung der neuen HTML5 input-Typen und Attribute, die wir verwendet haben. Firefox, Chrome, Opera und Safari haben ziemlich guten nativen Unterstützung für diese. IE6 - 9 bietet keine Unterstützung für sie überhaupt. Typische. Um ehrlich zu sein, es ist ziemlich schockierend IE9 keinen Support für diese Dinge, es erschien erst Anfang dieses Jahres. Jedenfalls sind die setzen IE bashing beiseite (ich könnte ewig so weitergehen), die ersten beiden Dinge, die wir, um Polyfill gehen der Autofokus und die PlatzhalterAttribut.

JQuery werde verwenden wir, um uns mit unserem JavaScript aushelfen. Wir verwenden es in erster Linie um unsere AJAX-Request, Animation und DOM-Traversal & Manipulation zu behandeln. Sie könnten damit durchkommen nicht in Gebrauch ist, aber Sie hätte eine erhebliche Menge an Code zu schreiben. Seine Präsenz ist nicht zu groß, also lebe ich mit der Dateigröße. Ich, würde wahrscheinlich wie du, lieber weniger Code schreiben.

Wir werden auch eine JavaScript-Bibliothek namens Modernizr verwenden, um uns mit Feature-Erkennung zu helfen. Dies ist bereits in unserer HTML5-Heizplatte enthalten, sodass wir hier nichts unternehmen müssen, um Modernizr zum Laufen zu bringen!

Navigieren Sie zum Verzeichnis js und öffnen Sie die Datei script.js. Wir haben nicht kümmern, verknüpfen diese Datei, jQuery oder Modernizr, mit index.php wie dies bereits uns HTML5 Boilerplate vorgesehen war, die wir verwendet. Löschen Sie alles in dieser Datei und fügen Sie in die folgenden:

$(function(){

    //set global variables and cache DOM elements for reuse later
    var form = $('#contact-form').find('form'),
        formElements = form.find('input[type!="submit"],textarea'),
        formSubmitButton = form.find('[type="submit"]'),
        errorNotice = $('#errors'),
        successNotice = $('#success'),
        loading = $('#loading'),
        errorMessages = {
            required: ' is a required field',
            email: 'You have not entered a valid email address for the field: ',
            minlength: ' must be greater than '
        }

    //feature detection + polyfills
    formElements.each(function(){
    
        //do feature detection + polyfills here
        
    });
});

Unser Code wird innerhalb des Blocks $(function() {}) Leben. Dies bedeutet, dass unser Code ausgeführt wird, sobald die Seite geladen ist. Auch werden alle Variablen oder Funktionen, die wir innerhalb dieses Blocks deklarieren mit anderen Code außerhalb nicht stören. Wir speichern dann einige DOM-Elemente, da wir auf diese ziemlich viel zugreifen werden. Es ist effizienter, sie auf diese Weise zu cachen, als sie jedes Mal anzufordern, wenn Sie sie verwenden möchten. Hier ist eine Auflistung dessen, was jede Variable:

Form: das Kontakt-Formular-Element.
FormElements: alle input Elemente und verarbeitet in Form mit Ausnahme der Schaltfläche "senden". Dies wird nur ein Array mit Elementen sein.
FormSubmitButton: das Formular absenden Knopf.
ErrorNotice: die Fehlermeldung--ungeordnete Listenelement.
SuccessNotice: die Erfolgsmeldung--Paragraph-Element.
Laden: Laden-Span-Element. Dies zeigt eine GIF-Datei laden, wenn das Formular einmal validiert übermittelt wird.
Fehlermeldungen: Dies ist ein Objekt mit etwas Text für unsere Fehlermeldungen. Diese sind mehr als einmal verwendet, so dass wir ihnen hier instanziiert werden. Sie werden feststellen, dass einige Nachrichten nicht richtig lesen. Wir werden um diese später dynamisch hinzufügen wann wir zum Validieren der Form gehen.

Danach nutzen wir eine jQuery Funktion, namens each() FormElements Array durchlaufen. Während wir die Formularelemente durchlaufen sind, wollen wir unsere Feature-Erkennung für das Platzhalter-Attribut zu tun, und wenn ein Element dieses Attribut hat aber wird nicht durch den Browser unterstützt gelten unsere Polyfill. Hier ist die Polyfill für das Platzhalterattribut:

//if HTML5 input placeholder attribute is not supported
if(!Modernizr.input.placeholder){
    var placeholderText = this.getAttribute('placeholder');
    if(placeholderText){
        $(this)
            .addClass('placeholder-text')
            .val(placeholderText)
            .bind('focus',function(){
                if(this.value == placeholderText){
                    $(this)
                        .val('')
                        .removeClass('placeholder-text');
                }
            })
            .bind('blur',function(){
                if(this.value == ''){
                    $(this)
                        .val(placeholderText)
                        .addClass('placeholder-text');
                }
            });
    }
}

Hier nutzen wir Modernizr, um festzustellen, ob wir Unterstützung für das Platzhalter-Attribut auf einen Eingang haben. Modernisierer ist ein Objekt, Eingabe ist eine Eigenschaft des Objekts und Platzhalter ist eine Eigenschaft der Eingabe (also alle Punkte). Dieser Wert ist entweder wahr oder falsch. Wir werden überprüfen, ob es ist falsch (der Browser unterstützt nicht das Platzhalter-Attribut); Wenn dies der Fall ist, setzen wir unsere Polyfill. Als Erstes deklarieren wir eine Variable, die den Platzhaltertext enthält, der dem Element zugewiesen ist. Obwohl der Browser das Platzhalterattribut nicht unterstützt, können wir trotzdem auf dieses Attribut zugreifen. Wir verwenden dazu eine Funktion namens getAttribute (). Das Schlüsselwort "this" bezieht sich auf die aktuellen DOM-Element sind wir durchlaufen auf dem Laufenden.

Sobald wir den Platzhaltertext verfügen, können wir eine Überprüfung, um sicherzustellen, dass es nicht leer ist. Dies ist, so dass wir nur unsere Polyfill Eingänge zuweisen, die das Platzhalter-Attribut haben. Wir sind dann einige wirklich nützliche jQuery Funktionen zusammen, um unsere Polyfill Verkettung. Hier ist eine Auflistung dessen, was wir tun:

Wir wickeln das 'dieses' Schlüsselwort in der jQuery-Funktion ($()), so wir Zugang zu einigen der praktischen jQuery DOM-Funktionen haben
Wir sind das Element die Klasse 'Platzhalter-Text' hinzufügen. Dies machen die Elemente Platzhaltertext, die wir, um Polyfill aussehen wie der Rest der Browser gehen. Wir haben in der Regel für diese Up bereits im CSS festgelegt.
Wir setzen den Eingang Standardwert auf den Wert des Attributs Platzhalter. Diese zeigen den Platzhaltertext in das Eingabefeld ein, wenn die Seite geladen wurde.
Wir sind ein Fokus-Event verbindlich, die prüft, ob der Platzhaltertext Attribut der Eingänge Wert identisch ist. Wenn es ist, die Eingabe Wert auf nichts, was die Eingabe löscht festgelegt ist, und wir entfernen Sie die "Platzhalter Text"-Klasse, so dass der Text die Standard-Eingabe Stil Text ist.
Wir sind eine Unschärfe-Veranstaltung verbindlich, die prüft, ob die Eingabe Wert gleich Null ist. Wenn es ist, wir füllen den Eingang mit den Platzhaltertext, und erneut bewerben den "Platzhal tertext"

Damit wird jedem Browser, der nicht dem Platzhalter Attribut Act unterstützt, als ob es überzeugend tut. Siehe das Bild unten von IE8:

Wir werden nächsten Polyfill das Autofokus Attribut. Dieses ist extrem einfach:

1	//if HTML5 input autofocus attribute is not supported
2	if(!Modernizr.input.autofocus){
3	if(this.getAttribute('autofocus')) this.focus();
4	}

Wir verwenden Modernisierer, um festzustellen, ob das Attribut Autofokus unterstützt wird. Wenn nicht, dann wir überprüfen, ob dieses Element der Autofokus Attribut gesetzt, und wenn ja, wir konzentrieren uns. Einfach. In jedem Browser, der dieses Attribut nicht unterstützt, wird dies eine Berichtigung bereitzustellen.

Die nur andere Dinge, die wir brauchen, Polyfill sind das erforderliche Attribut der e-Mail Eingabetyp und die eingebaute Formularvalidierung. Wir wollen auch in der Validierung für die Länge der Nachricht hinzufügen und die Fehlermeldung mit Details zu Problemen mit dem Formular anzeigen.

Schritt 9: Formularüberprüfung, Polyfill-Stil

//to ensure compatibility with HTML5 forms, we have to validate the form on submit button click event rather than form submit event. 
//An invalid html5 form element will not trigger a form submit.
formSubmitButton.bind('click',function(){
    var formok = true,
        errors = [];
        
    formElements.each(function(){
           
        //validate form elements here
           
    });
    
    //if form is not valid
    if(!formok){
        
        //show error message here
        
    }
    //if form is valid
    else {
        
        //ajax request + show success message here
        
    }
    
    return false; //this stops submission off the form and also stops browsers showing default error message
});

Wir sind ein Click-Ereignis für den Formular-Submit-Button (in der FormSubmitButton Variablen gespeichert) bindend. Wenn dieses Ereignis ausgelöst wird, werden wir das Formular überprüfen. Normalerweise ist das Submit-Ereignis des Formulars in JavaScript, wir täten dies tatsächlich auf das Submit-Ereignis des Formulars, aber wie die neueren Browser eigene Validierung erbaute, nie ausgelöst. Der Browser zeigt eine eigene Fehlermeldungen, aber dies ist höchst inkonsistent in allen Browsern, und gibt es derzeit keine Möglichkeit diese Styling. Unsere eigene Fehlermeldung Kohärenz sorgen und zeigen auch für Browser, die keine neuen Validierungsmethoden unterstützen. Um die Browser zeigen ihre Standard Fehlermeldungen zu stoppen zurück wir am Ende dieser Funktion false. Hier ist eine Auflistung dessen, was für die Variablen an die Spitze gesetzt sind:

Formok: Dies wird den Überblick behalten der Gültigkeit des Formulars.
Fehler: Dies ist ein Array und die Fehlermeldungen zu halten.

Es ist ähnlich wie die PHP-Validierung, das, die wir früher schrieben!

Wir beginnen innerhalb der Schleife, wohin wir gehen, um die Formularelemente überprüft werden. Innerhalb dieser Schleife wollen wir beginnen, indem er erklärt einige nützlichen Variablen, die wir in unsere Validierung verwenden.

var name = this.name,
    nameUC = name.ucfirst(),
    value = this.value,
    placeholderText = this.getAttribute('placeholder'),
    type = this.getAttribute('type'), //get type old school way
    isRequired = this.getAttribute('required'),
    minLength = this.getAttribute('data-minlength');

Name: der Name des aktuellen Elements.
NameUC: der Name des aktuellen Elements mit dem ersten Buchstaben Klassen-. ucfirst() ist eine benutzerdefinierte Methode des String-Objekts, die wir später schreiben wird.
Wert: der Wert des aktuellen Elements.
PlaceholderText: der Platzhaltertext des aktuellen Elements.
Typ: der Typ des aktuellen Elements.
IsRequired: ob das aktuelle Element das erforderliche Attribut gesetzt oder nicht hat.
MinLength: der Daten-Minlength Wert des aktuellen Elements (falls zutreffend).

Da wir nun unsere Variablen festgelegt haben, können wir mit unserer Überprüfung starten. Für die Elemente, die die HTML5 input-Typen und Attribute verwenden, können wir die neue Validierung JavaScript-API verwenden, um ihre Gültigkeit zu überprüfen.

In HTML5 haben Formular-Elemente eine neue Eigenschaft namens Gültigkeit. Dies ist, wo alle die Überprüfungsdaten für dieses Element gespeichert ist. In Firebug sieht es wie folgt:

Wie Sie sehen, gibt es in diesem Objekt zahlreiche Eigenschaften, die uns einen Hinweis auf das Problem geben. Die Werte der Eigenschaften sind entweder falsch oder falsch. In diesem Screenshot ich habe versucht, das Formular ohne Namen, und die Konsole (console.log(this.validity) die Gültigkeit-Eigenschaft für die Namenseingabe eingeloggt ). Dies zeigt mir, dass ein Wert fehlt (ValueMissing = True).

Unser Code für die Überprüfung der HTML5-Elemente:

//if HTML5 formfields are supported            
if( (this.validity) && !this.validity.valid ){
    formok = false;
    
    //if there is a value missing
    if(this.validity.valueMissing){
        errors.push(nameUC + errorMessages.required);    
    }
    //if this is an email input and it is not valid
    else if(this.validity.typeMismatch && type == 'email'){
        errors.push(errorMessages.email + nameUC);
    }
    
    this.focus(); //safari does not focus element an invalid element
    return false;
}

Wir überprüfen ob dieses Formularelement die Eigenschaft, Gültigkeit hat, und wenn dies der Fall, wir dann gültige Eigenschaft des Objekts Gültigkeit prüfen zu sehen, ob dieses Feld in Ordnung ist. Wenn er nicht gültig ist (Ich benutze die Kurzschrift!, für falsch zu überprüfen), wir Formok auf False festgelegt, und führen Sie einige Tests um zu sehen, was das Problem ist.

Wenn der Wert nicht vorhanden ist (ausgelöst durch Pflichtfelder), fügen wir eine Fehlermeldung in der Fehler-Array, die, das wir zuvor festgelegt. Wir verwenden die Push()Methode des Array-Objekts. Die Fehlermeldung wird bestehen aus den Namen des Elements (erster Buchstabe Klassen-) verkettet mit der erforderlichen Fehlermeldung, die wir früher in unserem Skript festgelegt.

Wenn dieses Formular Felder Wert nicht vorhanden ist, wollen wir dann feststellen, ob die richtigen Daten eingegeben wurde. Der einzige Eingang in unser Formular, die Validierung ist das e-Mail-Feld. Mit diesem im Verstand, in der Elseif Teil unseres Codes sind wir überprüfen, ob die TypeMismatch Eigenschaft des Objekts Gültigkeit gleich wahr und ist wenn dieser Input Type eigentlich e-Mail ist. Wenn ja, fügen wir die e-Mail-Fehlermeldung auf unsere Fehler-Array.

Wenn der Browser ein Feld überprüft und wird als ungültig betrachtet, ist es automatisch ausgerichtet. Safari unterstützt dies, nicht deshalb aus Gründen der Konsistenz, wir uns manuell die Eingabe konzentrieren. Wir zurückgeben false, dann am Ende unsere HTML5 Eingabeüberprüfung zu brechen aus der Schleife, wie wir wissen, dass wir ein ungültiges Element (wir brauchen nicht unsere Zeit den Rest der Elemente in der Form Validierung zu vergeuden).

Dies deckt unsere HTML5 Eingaben sehr schön, aber müssen wir nun zu den Browsern gerecht zu werden, die nicht die Formularvalidierung JavaScript API unterstützen. Wenn die JavaScript-Form-Validierung-API nicht vom Browser unterstützt wird wird der obige Code nie Exectued und übersprungen.

Das erste, was, dem wir gesucht wird, ist, wenn das Feld erforderlich war. Unsere Polyfill dafür aussehen wird:

//if this is a required element
if(isRequired){    
    //if HTML5 input required attribute is not supported
    if(!Modernizr.input.required){
        if(value == placeholderText){
            this.focus();
            formok = false;
            errors.push(nameUC + errorMessages.required);
            return false;
        }
    }
}

Zunächst prüfen wir, ob dieses Feld ein Pflichtfeld ist (diktiert das erforderliche Attribut). Wir verwenden dann Modernizr, um zu überprüfen, ob das erforderliche Attribut vom Browser unterstützt wird. Wenn dies nicht der Fall ist, müssen wir manuell überprüfen den Wert des Elements und vergleichen Sie es mit Platzhalter-Attribut des Elements. Wenn sie identisch sind, wurde dann offensichtlich dieses Formularfeld nicht ausgefüllt so dass wir vier Dinge tun:

Wir konzentrieren uns die Eingabe (als das was der Browser tut, wenn seine native Validierung mit)
Wir festgelegt die Formok Variable auf False, wie das Formular ungültig ist
Wir fügen eine Fehlermeldung auf unsere Fehler-Array.
Wir geben Sie false, die bricht aus der Schleife und gehen direkt an das nächste Bit des Codes außerhalb der Schleife.

Als nächstes werden wir prüfen, ob dies ist ein e-Mail-Eingang, und wenn es ist, ob eine gültige Email Adresse eingegeben wurde.

//if HTML5 input email input is not supported
if(type == 'email'){     
    if(!Modernizr.inputtypes.email){ 
        var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
        if( !emailRegEx.test(value) ){    
            this.focus();
            formok = false;
            errors.push(errorMessages.email + nameUC);
            return false;
        }
    }
}

Es ist ziemlich genau das selbe wie vor. Wir sehen, ob dies tatsächlich ein e-Mail-Feld, und dann verwenden Modernizr um zu überprüfen, ob der e-Mail-Eingang unterstützt wird. Wenn es nicht ist, wir unseren Code schreiben, der überprüft, ob es gültig oder nicht ist. Für diese Polyfill nutzen wir reguläre Ausdrücke um zu testen, ob die e-Mail gültig oder nicht ist. Wir erstellen einen regulären Ausdruck in der Variablen emailRegEx und verwenden dann die test () Methode des regulären Ausdrucks, um zu testen, ob der Wert der Eingabe für den regulären Ausdruck gültig ist.

Erfahren Sie mehr über die Verwendung der JavaScript reguläre Ausdrücke hier.

Wenn die e-Mail-Adresse nicht gültig ist, tun wir die gleichen vier Dinge, die wir auf die erforderlichen Eingaben zu überprüfen.

Das letzte, was, das wir in unserem Formular überprüfen müssen, ist die Länge der Nachricht. Die erforderliche Validierung wurde bereits oben, geachtet wurde also alles, was wir tun müssen, ist die Nachrichtenlänge überprüfen:

//check minimum lengths
if(minLength){
    if( value.length < parseInt(minLength) ){
        this.focus();
        formok = false;
        errors.push(nameUC + errorMessages.minlength + minLength + ' charcters');
        return false;
    }
}

Wir brauchen nicht Modernizr hier verwenden. Stattdessen alles, was wir tun müssen ist zu überprüfen, die dieses Element hat eine Mindestlänge festlegen, und wenn ja, stellen Sie sicher die Länge größer als die eingestellte minimale Länge ist. Length ist eine Eigenschaft aller Zeichenfolgenobjekte in JavaScript und gibt die Anzahl der Zeichen in der Zeichenfolge zurück. Wir verwenden parseInt() MinLength in eine Ganzzahl zu vergleichen es gegen value.length zu konvertieren. MinLength wurde aus dem Daten-Minlength Attribut abgerufen. Dies wird als eine Zeichenfolge abgerufen, also um mögliche Fehler auf der ganzen Linie (Vergleich von Zeichenfolgen, Zahlen usw.) zu vermeiden, dies in eine Ganzzahl umwandeln.

Unsere Polyfills und Validierung sind jetzt fertig und sortiert. Sie sollten mit dem folgenden Code gelandet:

//to ensure compatibility with HTML5 forms, we have to validate the form on submit button click event rather than form submit event. 
//An invalid html5 form element will not trigger a form submit.
formSubmitButton.bind('click',function(){
    var formok = true,
        errors = [];
        
    formElements.each(function(){
        var name = this.name,
            nameUC = name.ucfirst(),
            value = this.value,
            placeholderText = this.getAttribute('placeholder'),
            type = this.getAttribute('type'), //get type old school way
            isRequired = this.getAttribute('required'),
            minLength = this.getAttribute('data-minlength');
            
        //if HTML5 formfields are supported            
        if( (this.validity) && !this.validity.valid ){
            formok = false;
            
            //if there is a value missing
            if(this.validity.valueMissing){
                errors.push(nameUC + errorMessages.required);    
            }
            //if this is an email input and it is not valid
            else if(this.validity.typeMismatch && type == 'email'){
                errors.push(errorMessages.email + nameUC);
            }
            
            this.focus(); //safari does not focus element an invalid element
            return false;
        }
        
        //if this is a required element
        if(isRequired){    
            //if HTML5 input required attribute is not supported
            if(!Modernizr.input.required){
                if(value == placeholderText){
                    this.focus();
                    formok = false;
                    errors.push(nameUC + errorMessages.required);
                    return false;
                }
            }
        }

        //if HTML5 input email input is not supported
        if(type == 'email'){     
            if(!Modernizr.inputtypes.email){ 
                var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
                if( !emailRegEx.test(value) ){    
                    this.focus();
                    formok = false;
                    errors.push(errorMessages.email + nameUC);
                    return false;
                }
            }
        }
        
        //check minimum lengths
        if(minLength){
            if( value.length < parseInt(minLength) ){
                this.focus();
                formok = false;
                errors.push(nameUC + errorMessages.minlength + minLength + ' charcters');
                return false;
            }
        }
    });
    
    //if form is not valid
    if(!formok){
        
        //show error message here
        
    }
    //if form is valid
    else {
        
        //ajax request + show success message here
        
    }
    
    return false; //this stops submission off the form and also stops browsers showing default error message
});

Prima! Wir sind fast da jetzt. An diesem Punkt müssen wir nur den Code schreiben, der die Logik behandelt, um zu prüfen, ob das Formular gesendet werden soll oder nicht. Wir müssen, zeigen unsere Fehlermeldungen, die wir gespeichert haben, und das Formular absenden, wenn ein Fehler vorliegt. Wenn auf der anderen Seite gibt es kein Fehler, wir senden das Formular per AJAX und offenbaren die Erfolgsmeldung. Außerdem müssen wir die ucfirst() Funktion, die wir verwendet haben, um den ersten Buchstaben jeder Feldname in Großbuchstaben zu decken.

Schritt 11: Fast dort...

Das erste, was wir tun ist eine Funktion für den Umgang mit den Nachrichten und auch unsere ucfirst() Funktion zu schreiben. Fügen Sie den folgenden Code außerhalb der formSubmitButton.bind... Logik, die wir geschrieben haben.

//other misc functions
function showNotice(type,data)
{
    if(type == 'error'){
        successNotice.hide();
        errorNotice.find("li[id!='info']").remove();
        for(x in data){
            errorNotice.append('<li>'+data[x]+'</li>');    
        }
        errorNotice.show();
    }
    else {
        errorNotice.hide();
        successNotice.show();    
    }
}

String.prototype.ucfirst = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

Die ShowNotice Funktion werden zwei Argumente.

Der Typ der Meldung zeigen
Die Daten in der Nachricht angezeigt.

Wenn der Typ "Fehler" ist, wir verstecken die Erfolgsmeldung, durchlaufen die Daten (die ein Array sein sollte), und fügen Sie die Listenelemente, die Hinweise auf Fehler UL. Wir zeigen dann die Fehlermeldung mit der jQuery Funktion show(). Weil alle unsere Code befindet sich im gleichen Block, haben wir Zugriff auf Variablen, die außerhalb dieser Funktion (SuccessNotice und ErrorNotice). Wenn wir die Erfolgsmeldung anzeigen möchten, blenden wir einfach die Fehlermeldung aus und zeigen die Erfolgsmeldung an.

Mit der Funktion ucfirst () füge ich diese Funktion dem Prototyp des String-Objekts hinzu.

"Ein Prototyp ist ein Objekt, von dem andere Objekte Eigenschaften erben."

Dies bedeutet, dass alle String-Objekte unsere ucfirst () Funktion übernehmen. Deshalb haben wir früher name.ucfirst () verwendet. name ist eine Zeichenfolge, und da unsere Methode im Prototyp enthalten ist, steht sie zur Verfügung.

Wir erhalten das erste Zeichen (charAt (0)), machen es zu Großbuchstaben (toUpperCase ()) und geben es dann mit dem Rest der Zeichenfolge abzüglich des ersten Zeichens (Slice (1)) zurück. charAt, toUpperCase und slice sind alle Methoden des String-Objekts. Mehr über das Prototypobjekt erfahren Sie hier oder hier.

Nun, da wir unsere verschiedenen Funktionen sortiert haben, können wir uns auf die Logik für das Ergebnis des Formulars konzentrieren. Wir arbeiten wieder in der formSubmitButton.bind Logik.

//if form is not valid
if(!formok){
    
    //show error message here
    
}
//if form is valid
else {
    
    //ajax request + show success message here
    
}

Wir beginnen mit der Logik, wenn das Formular nicht gültig ist. Der folgende Code sollte in die if Anweisung eingefügt werden:

//animate required field notice
$('#req-field-desc')
    .stop()
    .animate({
        marginLeft: '+=' + 5
    },150,function(){
        $(this).animate({
            marginLeft: '-=' + 5
        },150);
    });

//show error message 
showNotice('error',errors);

Der erste Codeabschnitt animiert einfach das '* zeigt ein erforderliches Feld' an. Das ist nicht wesentlich; Es ist nur eine nette Sicherheit, die dem Benutzer ein wenig mehr Feedback gibt - ein Problem ist tatsächlich aufgetreten. Wir verwenden die jQuery-Funktion animate (), um den linken CSS-Wert des Elements zu animieren. Danach rufen wir unsere showNotice () Funktion auf. Wir möchten die Fehlermeldung anzeigen, so dass wir als erstes Argument 'error' übergeben, und dann für die Daten das Fehlerarray übergeben, in dem wir unsere Fehlernachrichten zur Formularüberprüfung gespeichert haben.

Wenn das Formular gültig ist, müssen wir es über AJAX einreichen.

loading.show();
$.ajax({
    url: form.attr('action'),
    type: form.attr('method'),
    data: form.serialize(),
    success: function(){
        showNotice('success');
        form.get(0).reset();
        loading.hide();
    }
});

Zunächst enthüllen wir unser Ladegif, um anzuzeigen, dass das Formular etwas tut. Wir verwenden dann die jQuery-Funktion ajax (), um das Formular an process.php zu senden. Für die URL und den Typ verwenden wir die jQuery-Funktion attr (), um diese Attribute zu erhalten. Für die Daten verwenden wir die jQuery-Funktion serialize (). Wenn die AJAX-Anforderung erfolgreich war, rufen wir unsere Funktion showNotice () auf und übergeben sie als erstes Argument 'success'. Dies zeigt unsere Erfolgsmeldung. Als letztes setzen wir das Formular zurück (löschen Sie die Formularfelder) und verbergen Sie das Ladegif Für das gesamte JavaScript ist jetzt gesorgt! Congrats1 Sie sollten mit Ihrer script.js Datei fertig sein, die so aussieht:

$(function(){

    //set global variables and cache DOM elements for reuse later
    var form = $('#contact-form').find('form'),
        formElements = form.find('input[type!="submit"],textarea'),
        formSubmitButton = form.find('[type="submit"]'),
        errorNotice = $('#errors'),
        successNotice = $('#success'),
        loading = $('#loading'),
        errorMessages = {
            required: ' is a required field',
            email: 'You have not entered a valid email address for the field: ',
            minlength: ' must be greater than '
        }
    
    //feature detection + polyfills
    formElements.each(function(){

        //if HTML5 input placeholder attribute is not supported
        if(!Modernizr.input.placeholder){
            var placeholderText = this.getAttribute('placeholder');
            if(placeholderText){
                $(this)
                    .addClass('placeholder-text')
                    .val(placeholderText)
                    .bind('focus',function(){
                        if(this.value == placeholderText){
                            $(this)
                                .val('')
                                .removeClass('placeholder-text');
                        }
                    })
                    .bind('blur',function(){
                        if(this.value == ''){
                            $(this)
                                .val(placeholderText)
                                .addClass('placeholder-text');
                        }
                    });
            }
        }
        
        //if HTML5 input autofocus attribute is not supported
        if(!Modernizr.input.autofocus){
            if(this.getAttribute('autofocus')) this.focus();
        }
        
    });
    
    //to ensure compatibility with HTML5 forms, we have to validate the form on submit button click event rather than form submit event. 
    //An invalid html5 form element will not trigger a form submit.
    formSubmitButton.bind('click',function(){
        var formok = true,
            errors = [];
            
        formElements.each(function(){
            var name = this.name,
                nameUC = name.ucfirst(),
                value = this.value,
                placeholderText = this.getAttribute('placeholder'),
                type = this.getAttribute('type'), //get type old school way
                isRequired = this.getAttribute('required'),
                minLength = this.getAttribute('data-minlength');
                
            //if HTML5 formfields are supported            
            if( (this.validity) && !this.validity.valid ){
                formok = false;
                
                //if there is a value missing
                if(this.validity.valueMissing){
                    errors.push(nameUC + errorMessages.required);    
                }
                //if this is an email input and it is not valid
                else if(this.validity.typeMismatch && type == 'email'){
                    errors.push(errorMessages.email + nameUC);
                }
                
                this.focus(); //safari does not focus element an invalid element
                return false;
            }
            
            //if this is a required element
            if(isRequired){    
                //if HTML5 input required attribute is not supported
                if(!Modernizr.input.required){
                    if(value == placeholderText){
                        this.focus();
                        formok = false;
                        errors.push(nameUC + errorMessages.required);
                        return false;
                    }
                }
            }

            //if HTML5 input email input is not supported
            if(type == 'email'){     
                if(!Modernizr.inputtypes.email){ 
                    var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
                     if( !emailRegEx.test(value) ){    
                        this.focus();
                        formok = false;
                        errors.push(errorMessages.email + nameUC);
                        return false;
                    }
                }
            }
            
            //check minimum lengths
            if(minLength){
                if( value.length < parseInt(minLength) ){
                    this.focus();
                    formok = false;
                    errors.push(nameUC + errorMessages.minlength + minLength + ' charcters');
                    return false;
                }
            }
        });
        
        //if form is not valid
        if(!formok){
            
            //animate required field notice
            $('#req-field-desc')
                .stop()
                .animate({
                    marginLeft: '+=' + 5
                },150,function(){
                    $(this).animate({
                        marginLeft: '-=' + 5
                    },150);
                });
            
            //show error message 
            showNotice('error',errors);
            
        }
        //if form is valid
        else {
          loading.show();
            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                data: form.serialize(),
                success: function(){
                    showNotice('success');
                    form.get(0).reset();
                    loading.hide();
                }
            });
        }
        
        return false; //this stops submission off the form and also stops browsers showing default error messages
        
    });

    //other misc functions
    function showNotice(type,data)
    {
        if(type == 'error'){
            successNotice.hide();
            errorNotice.find("li[id!='info']").remove();
            for(x in data){
                errorNotice.append('<li>'+data[x]+'</li>');    
            }
            errorNotice.show();
        }
        else {
            errorNotice.hide();
            successNotice.show();    
        }
    }
    
    String.prototype.ucfirst = function() {
        return this.charAt(0).toUpperCase() + this.slice(1);
    }
    
});

Fazit

Herzliche Glückwünsche! Du hast es geschafft Es war eine lange Fahrt, und wir haben in diesem Tutorial eine Menge Erfahrung gemacht.

Also, wo gehst du hin? Dies könnte zu einer viel größeren Form erweitert werden, und der gesamte Code, den Sie geschrieben haben, funktioniert weiterhin einwandfrei. Sie können sogar Ihre eigene Validierung für Dinge wie das Telefoneingabefeld oder das Attribut maxlength hinzufügen!

Vielen Dank für das Lesen und ich hoffe, Ihnen hat dieses Tutorial gefallen!