So entfernen Sie eine Klasse aus der Eingabe

Ich habe ein Stück JavaScript-Code, der ein Formular validiert. Wenn das Eingabefeld leer ist, füge ich das "leer" hinzu, das den Eingabefelder rot hinterlegt.So entfernen Sie eine Klasse aus der Eingabe

Gibt es eine Möglichkeit, diese Klasse zu entfernen, wenn der Benutzer auf das Feld klickt?

Ich hatte das versucht, aber es hat nicht funktioniert.

$('input').bind('blur', function(){   
     $(this).removeClass('empty'); 
    });

function register() 
 
    { 
 
    \t var errornotice = "This field is required"; 
 
    \t 
 
    \t if(document.myForma.userid.value == '') 
 
    \t { 
 
    \t \t var id = $("#userid"); 
 
    \t \t id.addClass("empty"); 
 
    \t \t id.val(errornotice); 
 
    \t } 
 
    \t 
 
    \t if(document.myForma.fullname.value == '') 
 
    \t { 
 
    \t \t var name = $("#fullname"); 
 
    \t \t name.addClass("empty"); 
 
    \t \t name.val(errornotice); 
 
    \t \t 
 
    \t } 
 
    \t 
 
    \t if($(":input").hasClass("empty")) 
 
    \t { 
 
    \t \t return false; 
 
    \t } 
 
    \t else 
 
    \t { 
 
    \t \t errornotice.hide(); 
 
    \t \t return true; 
 
    \t } 
 
    \t 
 
    \t 
 
    \t $('input').bind('blur', function(){ \t \t 
 
    \t $(this).removeClass('empty'); 
 
    \t }); 
 
    }

.empty 
 
    { 
 
    \t background:red; 
 
    \t color:#fff; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma"> 
 
     <div class="form-group"> 
 
     <label for="userN">User Name<span class="error">*</span></label> 
 
     <input type="text" name="userid" class="form-control" id="userid"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="fullname">Full name<span class="error">*</span></label> 
 
     <input type="text" id="fullname" name="fullname" class="form-control"> 
 
     <p id="empty"></p> 
 
     </div> 
 
     <input type="submit" value="submit" id="submit"> 
 
    </form>

Quelle

2016-05-31 Pedro

Warum nicht mit '$ ('input'). Klicken (....)'? –

1) Fügen Sie Event-Handlern keine Elemente in anderen Event-Handlern hinzu. Verschieben Sie die Event-Handler-Bindung woanders. 2) 'bind()' wurde in jQuery für eine lange Zeit veraltet. Wenn Sie keine alte Version von jQuery verwenden müssen, verwenden Sie 'on()'. 3) Unschärfe ist das Ereignis, das auftritt, wenn ein Benutzer ein Feld verlässt, nicht wenn sie das Feld betreten. Probieren Sie 'focusin'. –

Sie müssen den Ereignishandler * vor * den 'return' hinzufügen. Code nach einer return-Anweisung wird niemals ausgeführt. – 4castle

Es sieht aus wie Sie durch den Einsatz auf Blur auf dem richtigen Weg waren, aber ich würde empfehlen, auf die leere Zeichenfolge mit auf Fokus und auch den Text ändern. Auch die Art und Weise, wie es aussieht, als ob Ihr Text sich wie ein placeholder verhält, sollten Sie vielleicht in Betracht ziehen, aber der unten stehende Code verwendet es nicht.

function register() 
 
    { 
 
    \t var errornotice = "This field is required"; 
 
    \t 
 
    \t if(document.myForma.userid.value == '') 
 
    \t { 
 
    \t \t var id = $("#userid"); 
 
    \t \t id.addClass("empty"); 
 
    \t \t id.val(errornotice); 
 
    \t } 
 
    \t 
 
    \t if(document.myForma.fullname.value == '') 
 
    \t { 
 
    \t \t var name = $("#fullname"); 
 
    \t \t name.addClass("empty"); 
 
    \t \t name.val(errornotice); 
 
    \t \t 
 
    \t } 
 
    \t 
 
    \t $('.form-control').bind('focus', function(){ \t 
 
      $(this).val(''); 
 
    \t $(this).removeClass('empty'); 
 
    \t }); 
 
    }

.empty 
 
    { 
 
    \t background:red; 
 
    \t color:#fff; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma"> 
 
     <div class="form-group"> 
 
     <label for="userN">User Name<span class="error">*</span></label> 
 
     <input type="text" name="userid" class="form-control" id="userid"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="fullname">Full name<span class="error">*</span></label> 
 
     <input type="text" id="fullname" name="fullname" class="form-control"> 
 
     <p id="empty"></p> 
 
     </div> 
 
     <input type="submit" value="submit" id="submit"> 
 
    </form>

Quelle

2016-05-31 23:46:13

function register() 
 
    { 
 
    \t var errornotice = "This field is required"; 
 
    \t 
 
    \t if(document.myForma.userid.value == '') 
 
    \t { 
 
    \t \t var id = $("#userid"); 
 
    \t \t id.addClass("empty"); 
 
    \t \t id.val(errornotice); 
 
    \t } 
 
    \t 
 
    \t if(document.myForma.fullname.value == '') 
 
    \t { 
 
    \t \t var name = $("#fullname"); 
 
    \t \t name.addClass("empty"); 
 
    \t \t name.val(errornotice); 
 
    \t \t 
 
    \t } 
 
    \t 
 
    \t if($(":input").hasClass("empty")) 
 
    \t { 
 
    \t \t return false; 
 
    \t } 
 
    \t else 
 
    \t { 
 
    \t \t errornotice.hide(); 
 
    \t \t return true; 
 
    \t } 
 
    }  \t 
 
    \t 
 
    $('input[type="text"]').bind('focus', function(){ \t \t 
 
    \t $(this).removeClass('empty').val(''); 
 
    });

.empty 
 
    { 
 
    \t background:red; 
 
    \t color:#fff; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma"> 
 
     <div class="form-group"> 
 
     <label for="userN">User Name<span class="error">*</span></label> 
 
     <input type="text" name="userid" class="form-control" id="userid"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="fullname">Full name<span class="error">*</span></label> 
 
     <input type="text" id="fullname" name="fullname" class="form-control"> 
 
     <p id="empty"></p> 
 
     </div> 
 
     <input type="submit" value="submit" id="submit"> 
 
    </form>

Quelle

2016-05-31 22:48:33

können Sie den Fokus() -Methode der Klasse, wenn der Benutzer klickt auf dieses Steuerelement zu entfernen. Dies funktioniert auch mit einer Maus und einer Tastatur.

$('input[type="text"]').focus(function(){  
    $(this).removeClass('empty').val(''); 
});

function register() 
 
    { 
 
    \t var errornotice = "This field is required"; 
 
    \t 
 
    \t if(document.myForma.userid.value == '') 
 
    \t { 
 
    \t \t var id = $("#userid"); 
 
    \t \t id.addClass("empty"); 
 
    \t \t id.val(errornotice); 
 
    \t } 
 
    \t 
 
    \t if(document.myForma.fullname.value == '') 
 
    \t { 
 
    \t \t var name = $("#fullname"); 
 
    \t \t name.addClass("empty"); 
 
    \t \t name.val(errornotice); 
 
    \t \t 
 
    \t } 
 
    \t 
 
    \t if($(":input").hasClass("empty")) 
 
    \t { 
 
    \t \t return false; 
 
    \t } 
 
    \t else 
 
    \t { 
 
    \t \t errornotice.hide(); 
 
    \t \t return true; 
 
    \t } 
 
    }  \t 
 
    \t 
 
    $('input[type="text"]').focus(function(){ \t \t 
 
    \t $(this).removeClass('empty').val(''); 
 
    });

.empty 
 
    { 
 
    \t background:red; 
 
    \t color:#fff; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma"> 
 
     <div class="form-group"> 
 
     <label for="userN">User Name<span class="error">*</span></label> 
 
     <input type="text" name="userid" class="form-control" id="userid"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="fullname">Full name<span class="error">*</span></label> 
 
     <input type="text" id="fullname" name="fullname" class="form-control"> 
 
     <p id="empty"></p> 
 
     </div> 
 
     <input type="submit" value="submit" id="submit"> 
 
    </form>

Quelle

2016-05-31 23:00:55 santon

So entfernen Sie eine Klasse aus der Eingabe

Antwort

Verwandte Themen