Удаление сообщений валидатора jQuery

Question

Я использую плагин validator jQuery для проверки на стороне клиента.

Но после ввода допустимых значений полей сообщения об ошибках не удаляются, пока я не отправлю форму еще раз.

Такая же функциональность (удаление сообщений об ошибках) работает в другой форме. Можете ли вы рассказать мне, почему он не работает в этой конкретной форме.

Примечание: В этом конкретном виде у меня есть выпадающие списки, для которых ошибки удаляются после выбора действительных данных.

Это код, который я использую:

jq(document).ready(function(){ 
    jq("#user").validate({ 
     rules: { 
      userName: { 
       required: true 
      }, 
      password: { 
       required: true 
      } 
     }, 
     messages: { 
      userName: { 
       required: "User name is required." 
      }, 
      password: { 
       required: "Password is requiered." 
      },  
     } 
    }); 

    jq("#teamMember").validate({ 
     rules: { 
      teamMemberID: { 
       required: true, 
       minlength: 3, 
       maxlength: 20, 
       alphanumeric: true 
      }, 
      "role.roleID": { 
       selectRoleCheck: true 
      } 

     }, 
     messages: { 
      teamMemberID: { 
       required: "Member ID is required.", 
       minlength: "At least 3 characters required.", 
       maxlength: "Maximum 20 characters allowed.", 
       alphanumeric: "Special characters not allowed." 
      }, 
      teamMemberName: { 
       required: "Please enter a name.", 
       minlength: "At least 4 characters required.", 
       maxlength: "Maximum 20 characters allowed.", 
       alphanumeric: "Special characters not allowed." 
      }, 
      "role.roleID": { 
       required: "Please select role ID." 
      }, 
      startDate: { 
       required: "Please select start date." 
      }, 
      endDate: { 
       required: "Please select end date." 
      } 
     } 
    }); 

    jQuery.validator.addMethod('selectRoleCheck', function (value) { 
     return (value != '-1'); 
    }, "Please select role."); 

    jQuery.validator.addMethod('selectStatusCheck', function (value) { 
     return (value != '-1'); 
    }, "Please select status."); 

    jQuery.validator.addMethod('selectLocationCheck', function (value) { 
     return (value != '-1'); 
    }, "Please select location."); 

    if (jq("#teamMember").valid()) { 
     alert("Form is valid"); 
    } 

}); 

В этой функциональности, которую я ожидал работает для формы #user но не для #teamMemberForm.

Заранее спасибо.

Edit:

HTML:

<form:form action="/resourceManagement/teamMember/addTeamMember.htm" commandName="teamMember" method="POST"> 
    <div class="field"> 
     <div class="label"> 
      <form:label path="teamMemberID">Team Member ID</form:label> 
     </div> 
     <div class="input"> 
      <form:input path="teamMemberID" placeholder="Enter TeamMember ID"/> 
     </div> 
     <div class="teamMember-form-error"> 
      <form:errors path="teamMemberID" cssClass="error"></form:errors> 
     </div> 
    </div> 

    <div class="field"> 
     <div class="label"> 
      <form:label path="teamMemberName">TeamMember Name</form:label> 
     </div> 
     <div class="input"> 
      <form:input path="teamMemberName" placeholder="Enter TeamMember Name"/> 
     </div> 
     <div class="teamMember-form-error"> 
      <form:errors path="teamMemberName" cssClass="error"></form:errors> 
     </div> 
    </div> 

    <div class="field"> 
     <div class="label">TeamMember Role</div> 
     <div class="input"> 
      <form:select path="role.roleID"> 
      <form:option value="-1" >--Select--</form:option> 
     <c:forEach items="${roles}" var="r"> 
      <option value="${r.roleID}">${r.roleName} - ${r.rateType}</option> 
     </c:forEach> 
     </form:select> 
     </div> 
     <div class="teamMember-form-error"> 
      <form:errors path="role.roleID" cssClass="error"></form:errors> 
     </div> 
    </div> 

Answer 1

после ввода действительного значения полей сообщения об ошибках не получают удалены

Если объявить правило, но не включают в себя связанный с этим метод, вы получите ситуацию, когда плагин будет разбиваться по мере вашего описания.

Поскольку правило alphanumeric является частью the additional-methods.js file, мы можем только предположить, что вы не смогли включить этот файл.

В противном случае, обе формы работают отлично:

http://jsfiddle.net/qtcvdj4y/