来自jquery验证器的有效性和错误消息

Question

我为潜在用户构建了一个注册页面。对于注册表单，我使用jquery验证有效性字段。当字段无效时，将显示错误消息。

我试图将输入区域放在表格中，我注意到错误信息出现在输入字段旁边（例如，不在下一个单元格中）。

我需要知道是否有办法控制错误消息的显示位置。

除此之外，我想知道是否有办法显示有效性消息。例如，如果设置了字段，则显示验证图像，或者密码匹配是否显示消息类似＆＃34;密码匹配＆＃34;。

如果可能，我想要一些代码示例，除非它真的很容易。我对此很陌生，所以详细的帮助会对我有所帮助。提前谢谢！

这是我的代码部分

validate.js：

jQuery.validator.addMethod('usernameCheck', function (value) {

    var isSuccess = false;

    $.ajax({url: "check",
        type: "post",
        data: "name=" + value,
        async: false,
        success:
                function (msg) {
                    if ((msg.toString()) === "true") {
                        isSuccess = true;
                    }
                    if (isSuccess) {
        $("#nameInfo").html("true");
    }
                }
    });
    return isSuccess;
}, "");



$(document).ready(function () {


    //Validation rules for form
    $("#contact_form").validate({
        // Specify the validation rules

        rules: {
            username: {
                required: true,
                usernameCheck: true
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm: {
                required: true,
                equalTo: "#pass"
            },
            email: {
                required: true,
                email: true
            }
        },
        // Specify the validation error messages
        messages: {
            name: {
                required: "Please enter your name!!Please!!!",
                usernameCheck: "Username in use!"
            },
            pass: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            confirm: {
                equalTo: "Passwords are not matching"
            },
            email: "Please enter a valid email address"
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
});

单身形式：

        <div id="container">
            <h2>User Registration</h2>
            <form action="welcome.xhtml" method="post" id="contact_form">
                <table border="1">
                    <tbody>
                        <tr>
                            <td><label>Username: </label></td>
                            <td><input id="username" type="text" name="username" size="24" placeholder="4-24 characters" maxlength="24"/></td>
                            <td><label for="username"></label></td>
                        </tr>
                    </tbody>
                </table>

<!--                <div>
                    <label>Username: </label>
                    <input id="username" type="text" name="username" size="24" placeholder="4-24 characters" maxlength="24"/>
                </div>-->

                <div>
                    <label>Password: </label>
                    <input id="password" type="password" name="password" size="24" placeholder="8-24 characters" maxlength="24"/>
                </div>

                <div>
                    <label>Confirm Password: </label>
                    <input id="confirm" type="password" name="confirm" size="24" placeholder="8-24 characters" maxlength="24"/>
                </div>

                <div>
                    <label>Name: </label>
                    <input id="name" type="text" name="name" size="24"  maxlength="128"/>
                </div>

                <div>
                    <label>Surname</label>
                    <input id="surname" type="text" name="surname" size="24"  maxlength="128"/>
                </div>

                <div>
                    <label>Email: </label>
                    <input id="email" type="text" name="email" size="24"  maxlength="128"/>
                </div>

                <div>
                    <label>Phone Number: </label>
                    <input id="phoneNumber" type="text" name="phoneNumber" size="24"  maxlength="128"/>
                </div>

                <div >
                    <label>Address: </label>
                    <input id="address" type="text" name="address" size="24"  maxlength="128" placeholder="address/number"/>
                </div>

                <div>
                    <label>City: </label>
                    <input id="city" type="text" name="city" size="24"  maxlength="128"/>
                </div>

                <div>
                    <label>Country: </label>
                    <input id="country" type="text" name="country" size="24"  maxlength="128"/>
                </div>

                <div>
                    <label>Zip Code: </label>
                    <input id="zipcode" type="text" name="zipcode" size="24"  maxlength="128"/>
                </div>

                <div>
                    <label>TRN: </label>
                    <input id="trn" type="text" name="trn"/>
                </div>

                <div>
                    <input id="signup" name="signup"  type="submit" value="Sign Up"/>
                </div>

                <br/>
            </form>
        </div>
    </body>
</html>