如何在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> 

然後我想APLY一些樣式這個div包裹，我怎麼做？

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