XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   jquery Formular eingaben prüfung hilfe (http://xhtmlforum.de/showthread.php?t=70871)

beamwe 22.04.2014 20:56

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

explanator 22.04.2014 21:31

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.

beamwe 22.04.2014 22:16

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

explanator 22.04.2014 23:49

Die Lösung habe ich dir bereits genannt und funktioniert auch wenn jemand Javascript ausgeschaltet hat, was bei dir nicht der Fall wäre.


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:59 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023