Harish Menda Harish Menda - 7 months ago 30
Javascript Question

Removal of jQuery validator messages

I am using jQuery validator plugin for client side validations.

But after entering valid field values the error messages are not getting removed until I submit the form again.

The same functionality (removal of error messages) is working in other form. Can you tell me the reason why it is not working in this specific form.

Note: In this specific form I have select drop-downs for which errors are getting removed after selecting valid data.

This is code that I am using:

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");
}

});


In this the functionality that I am expecting is working for #user form but not for #teamMemberForm.

Thanks in advance.

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

after entering valid field values the error messages are not getting removed

If you declare a rule but fail to include the associated method, you will get a situation where the plugin will break as you describe.

Since the alphanumeric rule is part of the additional-methods.js file, we can only assume that you've failed to include this file.

Otherwise, both forms are working fine:

http://jsfiddle.net/qtcvdj4y/

Comments