Jquery.validate更改背景颜色 [英] Jquery.validate change background color

问题描述

你好

i使用这段代码验证我的表格

hello
i use this code to validate my form

jQuery("form[class^='wpcf7-form']").validate({ 
rules:{ 
'your-name':{required:true,maxlength:50,minlength:4}, 
'your-subject':{required:true,maxlength:100,minlength:10}, 
'your-message':{required:true,maxlength:500,minlength:10}, 
'your-email':{required:true,eemail:true,maxlength:50} 
}, 
submitHandler: function(form) { 
form.submit(); 
}, 
errorPlacement: function (error, element) { 
element.css('background', '#ffdddd'); 
error.insertAfter(element); 
} 
}); 

如果用户输入了错误的数据，那么背景颜色变为红色

但如果他更正数据他输入，背景仍然是红色虽然消息消失所以如果用户修复错误我怎么能将背景颜色返回白色

if user enter wrong data so the background color changed to red
but if he correct the data he entered , background still red although message disappeared So how can i return back the background color to white if user fix the errors

推荐答案

使用突出显示和 unhighlight 修改元素的方法：

Use the highlight and unhighlight methods to modify the element:

jQuery("form[class^='wpcf7-form']").validate({
    rules:{
        ...
    },
    
    // NB: This is the default behaviour, so isn't really required:
    submitHandler: function(form) {
        form.submit();
    },
    
    // Called when the element is invalid:
    highlight: function(element) {

（element）.css（' background'，' #ffdddd'）;
}，

// 元素有效时调用：
unhighlight： function （element）{

(element).css('background', '#ffdddd'); }, // Called when the element is valid: unhighlight: function(element) {

（element）.css（' background'，' #FFFFFF'）;
}

// 注意：不需要errorPlacement功能。
}）;

(element).css('background', '#ffffff'); } // NB: No need for the "errorPlacement" function. });

或者，使用 errorClass 指定将应用于无效元素的CSS类：

Alternatively, use the errorClass to specify a CSS class which will be applied to invalid elements:

jQuery("form[class^='wpcf7-form']").validate({
    rules:{
        ...
    },
    
    errorClass: "invalid"
    
    // No need for "errorPlacement", "highlight" or "unhighlight".
});

input.invalid, textarea.invalid, select.invalid
{
    background-color: #ffdddd;
}

.validate（）| jQuery验证插件 [ ^ ]

这篇关于Jquery.validate更改背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！