jQuery - Change Klasse in HTML durch Javascript von if/else if

Question

Ich habe eine Bootstrap-Validierung Form, die perfekt funktionieren, und auch das Eingabefeld Farbwechsel auf error & success.

Das Problem ist, ich möchte die text-color und border-color von Label ändern. Ich habe verschiedene JavaScript-Codes ausprobiert, aber niemand arbeitet für mich, da ich mit JavaScript nicht vertraut bin.

HTML

<form action="" class="form-horizontal form-bordered storyForm" novalidate> 

<div class="form-body"> 
    <div class="form-group" id="form-group"> 
     <div class="controls"> 
      <label class="control-label" id="label" for="email">Email</label> 
      <input type="email" id="email" class="form-control" name="email" required data-validation-required-message="This field is required"> 
     </div> 
    </div> 
    <div class="form-group" id="form-group"> 
     <div class="controls"> 
      <label class="control-label" id="label" for="password">Password</label> 
      <input type="password" id="password" class="form-control" name="password" required data-validation-required-message="This field is required"> 
     </div> 
    </div> 
</div> 

<div class="form-actions"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div class="offset-sm-3 col-md-9"> 
        <button type="submit" id="submit" class="btn btn-success"> <i class="fa fa-check"></i> Submit</button> 
        <button type="button" class="btn btn-inverse">Cancel</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

form.storyForm label{ 
    padding: 0px 25px; 
    /* background-color: rgba(0,0,0,.15); */ 
    color: #000; 
    border-radius: 4px 4px 0px 0px; 
    border: 1px solid rgba(0,0,0,.15); 
    border-bottom: 1px solid white !important; 
    top: 1px; 
    position: relative; 
} 
form.storyForm label.error{ 
    padding: 0px 25px; 
    /* background-color: rgba(0,0,0,.15); */ 
    color: #ef5350; 
    border-radius: 4px 4px 0px 0px; 
    border: 1px solid #ef5350; 
    border-bottom: 1px solid white !important; 
    top: 1px; 
    position: relative; 
} 
form.storyForm label.validate{ 
    padding: 0px 25px; 
    /* background-color: rgba(0,0,0,.15); */ 
    color: #26dad2; 
    border-radius: 4px 4px 0px 0px; 
    border: 1px solid #26dad2; 
    border-bottom: 1px solid white !important; 
    top: 1px; 
    position: relative; 
} 

Der Javascript Code, den ich hinzufügen, ich versuche/entfernen Sie die Klasse

Ich habe auch Throught class aber es war auch nicht für mich arbeitet

<script> 
$(document).ready(function() { 
$("#submit").click(function() { 
    if ($(".form-group").hasClass("error")) { 
     $(".control-label").addClass("error"); 
    } else if ($("#form-group").hasClass("validate")) { 
     $(".control-label").removeClass("error"); 
     $(".control-label").addClass("validate"); 
    } 
}); 
}); 
</script> 

Answer 1

ID-Selektoren nur das FIRST Element mit einer entsprechenden ID auf der Seite zurück, wenn in Javascript zu arbeiten. Hier ist ein einfacher Codepen, der das demonstriert: https://codepen.io/anon/pen/bYoqZP

Ihre Sizzle-Selektoren sollten definitiv kein ID-Selektor sein: $('#xxxxxxx'). Sie sollten entweder $('#label') ändern, um nur ein Elementselektor zu sein: $('label') oder wählen Sie die Klasse $('.control-label'). Sie verwenden auch einen ID-Selektor für form-group, der auch nur das erste Element mit dieser ID zurückgibt und somit verhindert, dass Ihr Klick-Handler Auswirkungen auf die 2., 3., ... n-ten Formulargruppen hat.

Mit Ihrem mitgelieferten Beispiel erklären Sie nicht, wie Sie Ihre Formulare validieren oder welche Fehlerklassen Sie zuerst hinzufügen. Was jetzt passiert, ist, dass Sie die Funktionalität des Senden-Buttons erweitern, um das Formular und anzupassen. Das Problem ist, wenn das Formular übermittelt wird nichts passieren wird, da Sie keine Aktion haben und Sie nichts mit Ihren Daten tun, sobald der Benutzer auf Senden klickt.

Wenn Sie Ihren Formulargruppen eine error Klasse hinzugefügt und auf "Senden" geklickt haben, wird Ihre Änderung wirksam, Sie benötigen jedoch einfach mehr Code für die Verarbeitung Ihres Formulars, um wirklich etwas zu tun.

Answer 2

Sie verwenden '$' innerhalb der JavaScript, stellen Sie sicher, dass Sie die JQuery Bibliothek enthalten haben. '$' ist das primäre Basisobjekt (oder die primäre Funktion) für JQuery. Wenn Sie nicht JQuery verwenden, müssen Sie JavaScript Methoden wie .getElementById() oder .querySelector() verwenden und Ihren ID-Wert als Parameter an diese Methoden übergeben.

Auch die Verwendung von querySelector ist eine bessere Möglichkeit, diese Funktionalität zu adressieren.

Hier ist der Link zu MDN getElementById() documentation und MDN querySelector() documentation.

Ich hoffe, das hilft! Viel Glück!