My changes allow for highlighting fields rather than overlaying error messages for inputs.
Change:
$.fn.wpcf7NotValidTip = function(message) {
return this.each(function() {
var into = $(this);
into.append('<span class="wpcf7-not-valid-tip">' + message + '</span>');
$('span.wpcf7-not-valid-tip').mouseover(function() {
$(this).fadeOut('fast');
});
into.find(':input').mouseover(function() {
into.find('.wpcf7-not-valid-tip').not(':hidden').fadeOut('fast');
});
into.find(':input').focus(function() {
into.find('.wpcf7-not-valid-tip').not(':hidden').fadeOut('fast');
});
});
};To:
$.fn.wpcf7NotValidTip = function(message) {
return this.each(function() {
var into = $(this);
$theParent = into.parent("span");
$parentInp = $theParent.parent("input");
into.find(':input').css('border-color', '#ff0000');
into.find(':input').mouseover(function() {
into.find(':input').css('border-color','#cccccc');
});
into.find(':input').focus(function() {
into.find(':input').css('border-color','#cccccc');
});
});
};Now when a field is validated the input border changes colour (error red) which you can change easily for your own use. Let me know if it works for you.
