Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Die Validierung eines Eingabefeldes während der Eingabe kann die Benutzerfreundlichkeit erheblich verbessern. Wir zeigen euch ein einfaches Beispiel, wie ihr ein Eingabefeld mit jQuery auf verschiedene enthaltene Zeichen überprüft.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Validierung mit .match() und RegEx

Im folgenden Beispiel wird der Text unter einem Eingabefeld grün hervorgehoben, sobald im Feld die richtigen Zeichen eingetragen wurden. Wir nutzen dazu die .match()-Funktion von jQuery in Verbindung mit dem gewünschten »Regex Pattern«. Der Benutzer bekommt somit ein visuelles Feedback, sobald ein vorgegebenes Kriterium erfüllt ist. Das geschieht in unserem Fall über das Hinzufügen einer CSS-Klasse.

Nachfolgender Code überprüft den eingegeben Text auf verschiedene Kriterien:

$('.kb-password').keyup(function(){
  var input = $(this).val();
  if( input.length >= 8 ){
    $('#length').addClass('valide');
  } else {
    $('#length').removeClass('valide');
  }
  if( input.match(/[A-z]/) ){
    $('#letter').addClass('valide');
  } else {
    $('#letter').removeClass('valide');
  } if( input.match(/[A-Z]/) ){
    $('#capital').addClass('valide');
  } else {
    $('#capital').removeClass('valide');
  } if( input.match(/\d/) ){
  $('#number').addClass('valide');
  } else {
    $('#number').removeClass('valide');
  } if( input.match(/[!@#$%\^&*(){}[\]<>?/|\-+]/) ){
  $('#special').addClass('valide');
  } else { 
    $('#special').removeClass('valide');
  }
});

Beispiel anschauen

Eine Bibliothek mit nützlichen Regex Pattern findet ihr hier.

Geschrieben von Felix Lehmann

thumb

Felix arbeitet als Frontend-Entwickler und Web-Designer bei kulturbanause®. Sein Hauptaufgabenbereich umfasst die Erstellung von Layouts und Vektorgrafiken, Mikroanimationen und modularen Website-Komponenten. Sowohl beim Entwickeln eines Prototyps als auch bei der Umsetzung eines individuellen WordPress-Themes legt er großen Wert auf eine angepasste Darstellung über alle Geräteklassen und Bildschirme hinweg.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: