Zugriff auf CSS-Datei innerhalb einer Javascript-Datei

Question

Ich habe ein Benutzerformular, das Vorname, Nachname, Passwort und bestätigen Passwortfelder enthält. Jetzt habe ich eine Validierung für das Passwort hinzugefügt und bestätige das Passwort, um zu prüfen, ob beide gleich sind. Ich hatte Javascript-Datei als

$(document).ready(function() { 
$("#addUser").click(function() { 
    var password = document.getElementById('password'); 
    var confirmPassword = document.getElementById('confirmPassword'); 
    var message = document.getElementById('confirmMessage'); 
    var matchingColor = "#008000"; 
    var nonMatchingColor = "#ff6666"; 

    if (password.value == confirmPassword.value) { 
     confirmPassword.style.backgroundColor = matchingColor; 
     message.style.color = matchingColor; 
     message.innerHTML = "Passwords Match!" 

    } else { 
     confirmPassword.style.backgroundColor = nonMatchingColor; 
     message.style.color = nonMatchingColor; 
     message.innerHTML = "Passwords Do Not Match!" 
    } 
}) 

});

Jetzt muss ich die CSS-Eigenschaften aus der Javascript-Datei entfernen. Ich wurde gebeten, etwas wie $ ('# classYouWantToChange') zu tun. AddClass ('passwordMatch'). RemoveClass ('passwordDoNotMatch') Ich bin mir nicht sicher, wie das funktioniert. Kann mir jemand helfen? Danke im Voraus.

Dies ist die jsp-Datei

<div class="form-horizontal" role="form" id="AddUser"> 
    <form action="adminAddUserForm" method="post"> 
     <fieldset> 
      <legend> 
       <fmt:message key="ManageUsers.ADD_USER" /> 
      </legend> 
     <div class="form-group"> 
      <label class="control-label col-sm-2" for="firstName"><fmt:message 
        key="addUser.FIRSTNAME_LABEL" /></label> 
      <div class="col-sm-2"> <input type="text" id="firstName" class="form-control" 
        name="firstName" required aria-required="true" placeholder="Jon" 
        title=<fmt:message key="addUser.FIRSTNAME_INPUT_MESSAGE" /> 
        maxlength="30" pattern="[a-zA-Z]+" /> 
      </div> 
     </div> 
     <br />   
     <div class="form-group"> 
      <label class="control-label col-sm-2" for="lastName"><fmt:message 
        key="addUser.LASTNAME_LABEL" /></label> 
      <div class="col-sm-2"> <input type="text" id="lastName" class="form-control" 
        name="lastName" required aria-required="true" placeholder="Doe" 
        title=<fmt:message key="addUser.LASTNAME_LABEL" /> 
        maxlength="30" pattern="[a-zA-Z]+"> 
      </div> 
     </div> 
     <br />   
     <div class="form-group"> 
      <label class="control-label col-sm-2" for="userName"><fmt:message 
        key="addUser.USERNAME_LABEL" /></label> 
      <div class="col-sm-2"> <input type="text" id="userName" class="form-control" 
        name="userName" required aria-required="true" placeholder="John_Doe" 
        title=<fmt:message key="addUser.USERNAME_INPUT_MESSAGE" /> 
        pattern="^[a-zA-Z0-9]+([_]?[a-zA-Z0-9])*$" > 
      </div> 
     </div> 
     <br /> 
     <div class="form-group"> 
      <label class="control-label col-sm-2" for="password"><fmt:message 
        key="addUser.PASSWORD_LABEL" /></label> 
      <div class="col-sm-2"> <input type="password" name="password" id="password" class="form-control" 
        title=<fmt:message key="ManageUsers.PASSWORD_VALIDATION" /> 
        required aria-required="true" pattern="(?=.\d)(?=.[A-Z]).{6,}" > 
      </div> 
      </div> 
     <%-- <div id="passwordsMatch" class="passwordsMatch" style="display: none;"> 
      <h5><fmt:message key="ManageUsers.PASSWORDS_MATCH" /> </h5> 
     </div> --%> 
     </br> 
     <div class="form-group"> 
      <label for="confirmPassword" class="control-label col-sm-2"><fmt:message 
       key="addUser.CONFIRM_PASSWORD_LABEL" /></label> 
      <div class="col-sm-2"> <input type="password" class="form-control" name="confirmPassword" id="confirmPassword"> 
       <span id="confirmMessage" class="confirmMessage"></span> 
     </div> 
     </div> 
     <div id="passwordsDoNotMatch" class="passwordsDoNotMatch" style="display: none;"> 
      <h5><fmt:message key="ManageUsers.PASSWORDS_NO_NOT_MATCH" /> </h5> 
     </div> 
      <c:choose> 
       <c:when test="${empty signFilter }"> 
        <div class="form-group"> 
         <label class="control-label col-sm-2" for="role"><fmt:message 
           key="addUser.ROLE_LABEL" /></label> 
         <input type="radio" id="role" name="userRole" value="ROLE_USER" 
          checked="checked" /> <fmt:message key="addUser.ROLE_USER" /> 
         <input type="radio" id="role" name="userRole" value="ROLE_INSTRUCTOR" /> 
          <fmt:message key="addUser.ROLE_INSTRUCTOR" /> 
         <input type="radio" id="role" name="userRole" value="ROLE_ADMIN" /> 
          <fmt:message key="addUser.ROLE_ADMIN" /> 
        </div> 
       </c:when> 
       <c:otherwise> 
        <input type="hidden" name="userRole" value="ROLE_USER"> 
       </c:otherwise> 
      </c:choose> 
      <br />      
    <div class="form-group">   
     <div class="col-sm-offset-2 col-sm-5" id="addUser"> 
      <input type="submit" class= "btn btn-info" name="submitBtn" value="Add User"> 
     </div> 
    </div> 

Answer 1

Sie die oben genannten Methoden wie folgt verwendet werden:

//On event trigger: 
//Do validations 
//If passwords match, then do this - 
$('#idYouWantToModify').addClass('passwordMatch') 

//If passwords do not match, then do this - 
$('#idYouWantToModify').addClass('passwordDoNotMatch') 

//You can remove the classes later if you have any additional steps that want you to do so, by doing the following: 
$('#idYouWantToModify').removeClass('whicheverClassYouWantToRemove') 

Sie können mehr über lesen. addClass() und. removeClass()

Answer 2

Um die Dinge einfacher zu machen, könnte man einfach jquery Toggle-Klasse wie so

//If passwords match, then do this - 
$('#idYouWantToModify').toggleClass('passwordMatch') 

fügt Klasse, wenn sie nicht dort und entfernt sie, wenn sein dort

mehr erfahren hier toggleclass

verwenden