Focus Function - fügt eine Klasse on-focus ein

frankeee

Grünschnabel
Hallo,
ich sage es gleich vorweg - ich bin kein JS Programmierer. Meine Kenntnisse sind sehr rudimentär, dehalb habe ich versucht eine Funktion für meinen Bedarf abzuändern.

Diese Funktion setzt die Klasse "active" wenn ein User in das Formularfeld(input, textarea, select) klickt. Wenn der User das Feld verlässt, wird die Klasse entfernt. So weit funktioniert die Funktion. Wenn das Formular nun validiert wird, wird auch die Klasse "active" gesetzt. Frage: Wie kann ich vermeiden, dass die Klsse bei Validierung gesetzt wird?

Hier das Script:
PHP:
jQuery(document).ready(function($){
    // on focus
    $(".wpcf7-form input").focus(function() {
            $(this).parent().siblings('label').addClass('active');
    })
    .blur(function() {
        var text_val = $(this).val();
        if(text_val === "") {
            $(this).parent().siblings('label').removeClass('active');
        }
    });
             $(".wpcf7-form textarea").focus(function() {
            $(this).parent().siblings('label').addClass('active');
    })
    .blur(function() {
        var text_val = $(this).val();
        if(text_val === "") {
            $(this).parent().siblings('label').removeClass('active');
        }
    });
   
          $(".wpcf7-form select").focus(function() {
            $(this).parent().siblings('label').addClass('active');
    })
    .blur(function() {
        var text_val = $(this).val();
        if(text_val === "") {
            $(this).parent().siblings('label').removeClass('active');
        }
    });
});
 
Zurück