jQuery 验证元素背景颜色的变化

发布于 2024-09-25 07:17:40 字数 1823 浏览 0 评论 0原文

默认情况下，jQuery.validate 似乎不会更改无效元素的背景颜色。是否也可以更改 select 元素的背景颜色？我的大多数元素都是 input type="text"，但我需要一个用于选择表单元素的指示器。我不使用默认生成的消息，因为它们不适合我的布局。

以下代码确实更改了input元素的背景颜色，但它永远不会恢复到以前的样式：

 $('form[name="register"]').validate({
        errorClass: 'jqInvalid',
        rules: {
            fnameCreate: "required", //input
            monthCreate: "required", //select
            emailCreate: { required: true, email: true }, //input
            passwordCreate: "required", //input type=password
        },
        messages: {
            fnameCreate: "",
            monthCreate: "",
            emailCreate: "",
            passwordCreate: "",
        },
        errorPlacement: function (error, element) {
            element.css('background', '#ffdddd');
        }
    });

编辑（示例）

<div class="field">
  <div class="labelName_fb">
    <label for="email">Email</label>
  </div>
  <div class="divforText3">
    <div class="divLeft"></div>
    <div class="textbox-image3">
      <input class="txt required" id="emailCreate" name="emailCreate" value="" maxlength="100" type="text"  style='width:180px'>
    </div>
    <div class="divright"></div>
  </div>
</div>

其中<当发生错误时，code>input 元素会被赋予 jqInvalid 错误类。

CSS

/* line 3 */ .error { background: #ffdddd; } /* I have since removed the errorClass option */
/* line 254 */ .field .txt {background:transparent none repeat scroll 0 0;border:medium none;color:#000;font-size:11px;width:130px; margin:5px 0;}

Chrome 中的 CSS 屏幕截图

原文

jQuery.validate doesn't seem to change the background color of the invalid element by default. Is it also possible to change the background color of a select element? Most of my elements are input type="text", but I need an indicator for the select form elements. I am not using the default generated messages, as they don't fit my layout.

The following code does change the background color of the input elements, but it never reverts to its previous style:

 $('form[name="register"]').validate({
        errorClass: 'jqInvalid',
        rules: {
            fnameCreate: "required", //input
            monthCreate: "required", //select
            emailCreate: { required: true, email: true }, //input
            passwordCreate: "required", //input type=password
        },
        messages: {
            fnameCreate: "",
            monthCreate: "",
            emailCreate: "",
            passwordCreate: "",
        },
        errorPlacement: function (error, element) {
            element.css('background', '#ffdddd');
        }
    });

Edit (sample)

<div class="field">
  <div class="labelName_fb">
    <label for="email">Email</label>
  </div>
  <div class="divforText3">
    <div class="divLeft"></div>
    <div class="textbox-image3">
      <input class="txt required" id="emailCreate" name="emailCreate" value="" maxlength="100" type="text"  style='width:180px'>
    </div>
    <div class="divright"></div>
  </div>
</div>

Where the input element is given the jqInvalid error class on error.

CSS

/* line 3 */ .error { background: #ffdddd; } /* I have since removed the errorClass option */
/* line 254 */ .field .txt {background:transparent none repeat scroll 0 0;border:medium none;color:#000;font-size:11px;width:130px; margin:5px 0;}

CSS screenshot in Chrome

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月竹挽风 2024-10-02 07:17:40

无效元素默认会得到一个 error 类默认，或者在您的情况下 jqInvalid 因为您已经设置了 errorClass 选项，只需在样式表中按照您想要的方式设置该类的样式，例如：

.jqInvalid { background: #ffdddd; }

您可以覆盖如果需要，错误消息（默认元素为）：

label.jqInvalid { background: none; }

此 CSS 方法负责删除...因为类一旦有效就会被删除。如果您希望将绿色背景应用于有效元素等，还有一个 success 类。

The invalid elements get a class of error by default, or in your case jqInvalid since you've set the errorClass option, just style that class like you want in the stylesheet, for example:

.jqInvalid { background: #ffdddd; }

You can override the specifics for the error messages (the default element being <label>) if you want:

label.jqInvalid { background: none; }

This CSS approach takes care of the removal...since the class is removed once it's valid. There's also a success class if you want a green background applied to valid elements, etc.

回复收藏 0 原文