删除 jQuery 验证器消息

Question

我正在使用 jQuery 验证器插件进行客户端验证。

但在输入有效字段值后，错误消息不会被删除，直到我再次提交表单。

相同的功能（删除错误消息）正在以其他形式运行。你能告诉我它不能以这种特定形式工作的原因吗？

注意： 在这个特定的表格中，我有 select 下拉菜单，在 select 输入有效数据后，错误将被删除。

这是我正在使用的代码：

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。

提前致谢。

编辑：

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

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

如果您声明了一个规则但没有包含关联的方法，您将遇到插件将按照您描述的那样中断的情况。

由于 alphanumeric 规则是 the additional-methods.js file 的一部分，我们只能假设您没有包含此文件。

否则，两种形式都可以正常工作：

http://jsfiddle.net/qtcvdj4y/

删除 jQuery 验证器消息

Removal of jQuery validator messages

jquery

jquery-validate