kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Formular-Validierung während der Eingabe mit jQuery

form-validator

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.