删除jQuery验证器消息

时间:2015-11-04 08:58:00

标签: jquery jquery-validate

我正在使用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。

提前致谢。

修改

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>

1 个答案:

答案 0 :(得分:0)

  

输入有效字段值后,错误消息不会被删除

如果您声明规则但未能包含相关联的方法,则会出现插件在您描述时中断的情况。

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

否则,两种表格都正常工作:

http://jsfiddle.net/qtcvdj4y/