jquery - 如何在 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 包装上应用一些样式，我该怎么做？

Answer 1

使用 the wrapper option 时设置为 "div"，您将得到错误消息的这个标记...

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

Then I want to aply some style this div wrap, How I do that?

只需使用 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 */
}