Как добавить класс в элемент span, если проверка прошла успешно?

Question

Я новичок в jQuery и пытаюсь использовать его для проверки страницы регистрации. Это мой HTML

<div class="form-group"> 
    <label for="inputFirstName" class="col-lg-3 control-label">First name</label> 

    <div class="col-lg-6"> 
     <input type="text" class="form-control" id="inputFirstName" name="inputFirstName" placeholder="First name"> 
     <span class="" aria-hidden="true"></span> <-- this span 
    </div> 
</div> 

и это мой Javascript

$(document).ready(function() { 


$('#registration-form').validate({ 
    rules: { 
     inputFirstName: { 
      required: true, 
     }, 

    }, 
    highlight: function (element) { 
     $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback'); 
     //want to remove 'glyphicon glyphicon-ok form-control-feedback' and then add some other class to span 
    }, 
    success: function (element) { 
     $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback'); 
     //want to insert 'glyphicon glyphicon-ok form-control-feedback' to span 
    } 
}); 
}); 

Я хочу добавить glyphicon glyphicon-ok form-control-feedback к промежутку, если проверка прошла успешно

Я попытался добавления

$(element).closest('span').addClass("glyphicon glyphicon-ok form-control- feedback");

Но это не сработало.

Как я могу это достичь?

Благодаря

Answer 1

Шаг 1
Дайте поверочного идентификатор

 


    <span class="" id="myspan" aria-hidden="true"> 

Шаг 2 Использование addClass() метод JQuery (как показано ниже) внутри успеха

 
<%-- 
Created by IntelliJ IDEA. 
User: RaghavFTW 
    Date: 04/07/15 
    Time: 15:13 
    To change this template use File | Settings | File Templates. 
--%> 
<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<jsp:include page="../shared/header.jsp"/> 
<div class="container"> 
    <div class="row"> 

     <div class="col-lg-6"> 
      <form action="/register" id="registration-form" class="form-horizontal" method="post"> 
       <fieldset> 
        <legend>Register</legend> 

        <div class="form-group"> 
         <label for="inputFirstName" class="col-lg-3 control-label">First name</label> 

         <div class="col-lg-6"> 
          <input type="text" class="form-control" id="inputFirstName" name="inputFirstName" 
            placeholder="First name"> 
          <span class="" for="inputFirstName" id="spanFirstName" aria-hidden="true"></span> 
         </div> 
        </div> 

        <div class="form-group"> 
         <label for="inputLastName" class="col-lg-3 control-label">Last name</label> 

         <div class="col-lg-6"> 
          <input type="text" class="form-control" id="inputLastName" name="inputLastName" 
            placeholder="Last name"> 
          <span class="" for="inputLastName" aria-hidden="true"></span> 
         </div> 
        </div> 

        <div class="form-group"> 
         <label for="inputUsername" class="col-lg-3 control-label">Username</label> 

         <div class="col-lg-6"> 
          <input type="text" class="form-control" id="inputUsername" name="inputUsername" 
            placeholder="Username"> 
          <span class="" for="inputUsername" aria-hidden="true"></span> 
         </div> 
        </div> 

        <div class="form-group"> 
         <label for="inputPassword" class="col-lg-3 control-label">Password</label> 

         <div class="col-lg-6"> 
          <input type="password" class="form-control" name="inputPassword" id="inputPassword" 
            placeholder="Password"> 
          <span class="" for="inputPassword" aria-hidden="true"></span> 
         </div> 
        </div> 

        <div class="form-group"> 
         <label for="inputEmail" class="col-lg-3 control-label">Email</label> 

         <div class="col-lg-7"> 
          <input type="text" class="form-control" id="inputEmail" name="inputEmail" 
            placeholder="Email"> 
          <span class="" for="inputEmail" aria-hidden="true"></span> 
         </div> 
        </div> 

        <div class="form-group"> 
         <label for="address" class="col-lg-3 control-label">Address</label> 

         <div class="col-lg-9"> 
          <textarea style="max-width: 100%" class="form-control" rows="3" id="address" 
             name="address"></textarea> 
          <span class="" for="address" aria-hidden="true"></span> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-lg-3 control-label">Gender</label> 

         <div class="col-lg-6"> 
          <div class="radio"> 
           <label> 
            <input type="radio" name="gender" id="male" value="Male" 
              checked=""> 
            Male 
           </label> 
           <br> 
           <label> 
            <input type="radio" name="gender" id="female" value="female"> 
            Female 
           </label> 
          </div> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-lg-4 col-lg-offset-8"> 
          <button type="reset" class="btn btn-default">Cancel</button> 
          <button type="submit" class="btn btn-primary">Submit</button> 
         </div> 
        </div> 
       </fieldset> 
      </form> 
     </div> 
    </div> 
</div> 

<jsp:include page="../shared/footer.jsp"/> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script> 
<script> 
    $(document).ready(function() { 

     $('#registration-form').validate({ 
      rules: { 
       inputUsername: { 
        minlength: 5, 
        required: true 
       }, 
       inputPassword: { 
        required: true, 
        minlength: 6 
       }, 
       confirm_password: { 
        required: true, 
        minlength: 6, 
        equalTo: "#password" 
       }, 
       inputEmail: { 
        required: true, 
        email: true 
       }, 
       address: { 
        minlength: 10, 
        required: true 
       }, 
       inputFirstName: "required", 

      }, 
      highlight: function (element) { 
       $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback'); 
      // var identify = element.parent(); 
      // console.log(identify); 
      // $("span[for='"+identify+"']").removeClass("glyphicon glyphicon-ok form-control- feedback"); 
      }, 
      success: function (element) { 
       $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback'); 
       $(element).remove(); 
       var identify = element.attr("for"); 
       console.log(identify); 
       $("span[for='"+identify+"']").addClass("glyphicon glyphicon-ok form-control- feedback"); 
      } 
     }); 

     $('#search-form').validate({ 
      rules: { 
       search: "required" 
      }, 
      highlight: function (element) { 
       $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); 
      }, 
      success: function (element) { 
       $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); 
      } 
     }); 

     $("input,textarea").change(function(){ 
      var identify = this.id; 
      console.log(identify); 
      $("span[for='"+identify+"']").removeClass("glyphicon glyphicon-ok form-control-feedback"); 
     }); 


    }) 
    ; // end document.ready 
</script> 

Answer 2

Попробуйте использовать

$(element).closest('div[class="col-lg-6"]').find('span').addClass("glyphicon glyphicon-ok form-control- feedback");