如何在 jQuery 验证插件中指定包装器的样式？

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"（ 而不是 [=15= 的 ])...

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

...获取此标记...

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

然后使用CSS设置样式...

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

如何在 jQuery 验证插件中指定包装器的样式？

How to specify a style for the wrapper in jQuery Validate plugin?

html

css

jquery

jquery-validate