如何使用 jQuery Validation 插件在元素下方显示错误消息

Question

下面是运行良好的 jquery 验证代码，除了一件事 - 它显示内联错误消息，我想在元素下方显示错误消息。我该怎么做？

$(document).ready(function() {
    $.validator.addMethod("email", function(value, element) 
    { 
        return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]         {2,5}$/i.test(value); 
    }, "Please enter a valid email address.");

    $.validator.addMethod("username",function(value,element)
    {
        return this.optional(element) || /^[a-zA-Z0-9._-]{3,16}$/i.test(value); 
    },"Username are 3-15 characters");

    $.validator.addMethod("password",function(value,element)
    {
        return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/i.test(value); 
    },"Passwords are 6-16 characters");

    // Validate signup form
    $("#signup").validate({
        rules: {
            email: "required email",
            username: "required username",
            password: "required password",
        },
    });
});

body
{
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
}
input
{
    width:220px;
    height:25px;
    font-size:13px;
    margin-bottom:10px;
    border:solid 1px #333333;
}
label.error 
{
    font-size:11px;
    background-color:#cc0000;
    color:#FFFFFF;
    padding:3px;
    margin-left:5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<form method="post" action="thank.html" name="signup" id="signup">
    Email<br />
    <input type="text" name="email" id='email'/><br />
    UserName<br />
    <input type="text" name="username" id="username" /><br />
    Password<br />
    <input type="password" name="password" id="password" /><br />
    <input type="submit" value=" Sign-UP " name='SUBMIT' id="SUBMIT"/>
</form>

Answer 1

正如 cmets 中已经提到的，您可以将 errorlabel 的 CSS display 属性更改为 block 以便在新行中呈现：

$(document).ready(function () {
    $.validator.addMethod("email", function (value, element) {
        return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]         {2,5}$/i.test(value);
    }, "Please enter a valid email address.");

    $.validator.addMethod("username", function (value, element) {
        return this.optional(element) || /^[a-zA-Z0-9._-]{3,16}$/i.test(value);
    }, "Username are 3-15 characters");

    $.validator.addMethod("password", function (value, element) {
        return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/i.test(value);
    }, "Passwords are 6-16 characters");

    // Validate signup form
    $("#signup").validate({
        rules: {
            email: "required email",
            username: "required username",
            password: "required password",
        },
    });
});

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
}
input {
    width:220px;
    height:25px;
    font-size:13px;
    margin-bottom:10px;
    border:solid 1px #333333;
}
label.error {
    display:block; /* change the display to block*/
    width:200px; /*if necessary*/
    font-size:11px;
    background-color:#cc0000;
    color:#FFFFFF;
    padding:3px;
    margin-left:5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<form method="post" action="thank.html" name="signup" id="signup">Email
    <br />
    <input type="text" name="email" id='email' />
    <br />UserName
    <br />
    <input type="text" name="username" id="username" />
    <br />Password
    <br />
    <input type="password" name="password" id="password" />
    <br />
    <input type="submit" value=" Sign-UP " name='SUBMIT' id="SUBMIT" />
</form>

---

或者您可以使用errorElement 选项指定一个自定义block 元素来显示错误：

$(document).ready(function () {
    $.validator.addMethod("email", function (value, element) {
        return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]         {2,5}$/i.test(value);
    }, "Please enter a valid email address.");

    $.validator.addMethod("username", function (value, element) {
        return this.optional(element) || /^[a-zA-Z0-9._-]{3,16}$/i.test(value);
    }, "Username are 3-15 characters");

    $.validator.addMethod("password", function (value, element) {
        return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/i.test(value);
    }, "Passwords are 6-16 characters");

    // Validate signup form
    $("#signup").validate({
        rules: {
            email: "required email",
            username: "required username",
            password: "required password",
        },
        errorElement : 'div'
    });
});

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
}
input {
    width:220px;
    height:25px;
    font-size:13px;
    margin-bottom:10px;
    border:solid 1px #333333;
}
div.error {
    width:200px;
    font-size:11px;
    background-color:#cc0000;
    color:#FFFFFF;
    padding:3px;
    margin-left:5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<form method="post" action="thank.html" name="signup" id="signup">Email
    <br />
    <input type="text" name="email" id='email' />
    <br />UserName
    <br />
    <input type="text" name="username" id="username" />
    <br />Password
    <br />
    <input type="password" name="password" id="password" />
    <br />
    <input type="submit" value=" Sign-UP " name='SUBMIT' id="SUBMIT" />
</form>