如何设置jQuery Validation插件错误提示样式且不影响输入框内容样式

直接使用.error会同时影响验证失败的输入框和错误提示文字，因为jQuery Validation插件默认会给验证不通过的表单元素和对应的错误提示标签都添加error类。你可以通过以下几种方式精准定位错误提示元素：

• 利用插件默认的错误提示标签（默认是<label>），限定选择器范围：

  label.error {
    color: red;
    /* 可添加其他样式，比如：
    font-size: 12px;
    margin-top: 4px;
    */
  }
  

• 如果你自定义了错误提示的容器（比如用<div>），对应修改标签选择器即可：

  div.error {
    color: red;
  }
  

• 或者通过相邻兄弟选择器，定位输入框后的错误提示：

  input.error + .error {
    color: red;
  }
  

  这种方式适用于错误提示紧跟在对应输入框后的结构。

内容的提问来源于stack exchange，提问作者sidhique kerala