如何在 jQuery Validate 插件中为包装器指定样式？

Question

我有一个响应式 Web 应用程序，我正在使用 jquery validate.js 验证一个表单，问题是我希望错误消息位于输入下方，所以我为此使用了一个包装。这是代码：

    <script src="dist/jquery.validate.js"></script> 
<script>
$.validator.setDefaults({
    submitHandler: function() {
        signupForm.submit();
    }
});

$().ready(function() {

    // validate signup form on keyup and submit
    $("#signupForm").validate({
        wrapper: "div",
        rules: {
            email: {
                required: true,
                email: true
            },
            confirm_email: {
              equalTo: "#email"
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
              equalTo: "#password"
            },
            pais:       {required: true},
            pregunta:   {required: true}
        },
        messages: {
            alias:  {required: "Campo obligatorio"},
            email: "Use una cuenta de correo v&aacute;lida",
            confirm_email: 
            {
                required: "Use una cuenta de correo v&aacute;lida",
                equalTo: "Los correos deben coincidir"
            },
            password: {
                required: "Campo obligatorio",
                minlength: "La contrase&ntilde;a al menos debe tener 5 caracteres"
            },
            confirm_password: {
                required: "Campo obligatorio",
                minlength: "La contrase&ntilde;a al menos debe tener 5 caracteres",
                equalTo: "La contrase&ntilde;as deben coincidir"
            },
            pais:       {required: "Campo obligatorio"},
            pregunta:   {required: "Campo obligatorio"},
            respuesta:  {required: "Campo obligatorio"}
        }
    });

});
</script>   

然后我想在这个 div wrap 中应用一些样式，我该怎么做？

Answer 1

当使用 the wrapper option 设置为 "div" 时，您最终会得到错误消息的此标记...

<div>
    <label class="error">Validation Error Message</label>
</div>

然后我想在div wrap 中应用一些样式，我该怎么做？

只需使用 CSS 来设置样式...

label.error {
    /* your CSS rules */
}

---

但是，如果您想定位div 本身，请将the errorElement option 设置为"div"（而不是 wrapper）...

$("#signupForm").validate({
    errorElement: "div",
    ....

...获取此标记...

<div class="error">Validation Error Message</div>

那就用 CSS 来设置样式吧……

div.error {
    /* your CSS rules */
}