|
|||
jquery Formular eingaben prüfung hilfe
Hallo Zusammen
Ich habe folgendes problem wo ich nicht weiter komme... Ich habe erfolgreich ein Formular erststellt, jquery ist für die eingabenprüfung zuständig. Funktioniert auch alles prima. Mein problem ist wenn eine eingabe gemacht werden dann wird weiterhin ein fehler angezeigt, obwohl berreits etwas eingegeben wurde. Erst wenn ich man auf senden klickt und ein anderer berreich leer ist, verschwindet der Fehler und eine neuer im neuen input feld wird angezeigt. Würde das gerne so haben das wenn gerade etwas eingegeben wird der fehler sofort weg geht, ohne das man auf absenden. hier der code HTML-Code:
<div id="contact_form"> <form name="contact" action="php/contact.php" method="POST" enctype="text/html"> <div class="field1" style="padding-top:0;"> <label for="name" id="name_label">Name:</label> <input type="text" name="name" id="name" size="20" value="" class="text-input" /> <label class="error" for="name" id="name_error">Fehler * Bitte Name eingeben</label> </div> <div class="field1" style="padding-top:0;"> <label for="nachname" id="nachname_label">Nachname:</label> <input type="text" name="nachname" id="nachname" size="20" value="" class="text-input" /> <label class="error" for="nachname" id="nachname_error">Fehler * Bitte Name eingeben</label> </div> <div style="clear:both;"></div> <div class="field1"> <label for="ort" id="ort_label">Wohnort:</label> <input type="text" name="ort" id="ort" size="20" value="" class="text-input" /> <label class="error" for="ort" id="ort_error">Fehler * Bitte Wohnort eingeben</label> </div> <div class="field1"> <label for="phone" id="phone_label">Telefon:</label> <input type="text" name="phone" id="phone" size="17" value="" class="text-input" onkeypress="this.value=keepDigits( this.value );" onchange="this.value=keepDigits( this.value );" /> <label class="error" for="phone" id="phone_error">Fehler * Bitte Telefon eingeben</label> </div> <div class="field1"> <label for="email" id="email_label">Email:</label> <input type="text" name="email" id="email" size="25" value="" class="text-input" /> <label class="error" for="email" id="email_error">Fehler * Bitte E-Mail eingeben</label> </div> <div class="field1"> <label for="betnachricht" id="betnachricht_label">Betreff:</label> <select name="betnachricht" id="betnachricht" class="select-input" size="0" > <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> <option>Option 6</option> <option>Option 6</option> </select> <label class="error" for="betnachricht" id="betnachricht_error">Fehler * Bitte Betreff eingeben</label> </div> <div class="field2"> <label for="nachricht" id="nachricht_label">Nachricht:</label> <div style="clear:both;"></div> <textarea name="nachricht" id="nachricht" class="textarea" cols="71" rows="7" ></textarea> <label class="error" for="nachricht" id="nachricht_error">Fehler * Bitte Nachricht eingeben</label> </div> <div id="send-container"> <div id="top-info"> <p>Ihre Daten werden 'ausschließlich' benutzt, um mit Ihnen Kontakt aufzunehmen Vielen Dank!.</p> </div> <div class="sendbutton"> <input type="submit" name="submit" class="button" id="submit_btn" value="Absenden" /> </div> </div> </form> </div> Code:
// jquery Document $(function() { $('.error').hide(); $(".button").click(function() { // validate and process form here $('.error').hide(); var name = $("input#name").val(); if (name == "") { $("label#name_error").show(); $("input#name").focus(); return false; } var nachname = $("input#nachname").val(); if (nachname == "") { $("label#nachname_error").show(); $("input#nachname").focus(); return false; } var ort = $("input#ort").val(); if (ort == "") { $("label#ort_error").show(); $("input#ort").focus(); return false; } var phone = $("input#phone").val(); if (phone == "") { $("label#phone_error").show(); $("input#phone").focus(); return false; } var email = $("input#email").val(); if (email == "") { $("label#email_error").show(); $("input#email").focus(); return false; } var nachricht = $("textarea#nachricht").val(); if (nachricht == "") { $("label#nachricht_error").show(); $("textarea#nachricht").focus(); return false; } }); }); Hoffe ihr könnt mir helfen und versteht mein problem. Danke |
Sponsored Links |
|
|||
Wenn du mit jQuery sowieso nur prüfst ob das Feld ausgefüllt ist, dann kannst du jQuery auch gleich sein lassen. Mit HTML5 wurde das Attribut required eingeführt, das genau das macht.
Siehe auch Spektakuläre Formulare mit HTML5 - HTML5 Rocks Deine Eingabefelder lassen nur 20 Zeichen zu, das ist oft zu kurz. Garmischpatenkirchen hat schon 21 Zeichen und viele Nachnamen sind auch oft länger.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
hmm
hmm... also ich habe mich noch nicht in HTML5 eingearbeitet.
Jquery muss erstmal reichen.... es gibt aufjedenfall eine lösing dazu. Bin nur nicht der fachman für sowas, leider. MfG |
|
|||
Die Lösung habe ich dir bereits genannt und funktioniert auch wenn jemand Javascript ausgeschaltet hat, was bei dir nicht der Fall wäre.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Stichwörter |
formular, jquery |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Jquery Formular entfernen/verhindern/Attr löschen | tichy | Javascript & Ajax | 1 | 16.03.2013 20:29 |
jQuery Hilfe | panamera | Javascript & Ajax | 0 | 20.02.2010 01:20 |
JQUERY - Nach Formular senden weitere Funktion aufrufen | sturmi2 | Javascript & Ajax | 1 | 28.10.2009 17:32 |
Hilfe für Formular / auf Dankeseite | Dee | (X)HTML | 0 | 01.12.2007 19:45 |
Hilfe bei legend formular | berndw | CSS | 2 | 25.07.2006 13:37 |