Contact Form 7 | How to Hide Validation Errors on Hover
- Posted by: Hiren Ponkia on 14 Oct, 2015
Contact form 7 by default handles validation quite well; the form displays validation error messages (e.g., on leaving required fields blanks and submit wrong values on email etc…)
But problem is validation error don’t disappear even after you filled all required fields with corrects values. Even you filled field with correct information, validation boxes messages stay in place and create confusion for user. Ideally when user click back on field then the validation message should disappears.
This post describes how you hide the validation error messages that Contact Form 7 produces.
Option 1: jQuery Fix:
Place following code before closing of head tag.
jQuery(document).ready(function($) {
// clear cf7 error msg on mouseover
$(".wpcf7-form-control-wrap").mouseover(function(){
$obj = $("span.wpcf7-not-valid-tip",this);
$obj.css('display','none');
});
});
Other alternative option is to change cform7’s core file code, which one should explore if Option 1 don’t work with your theme. Not the best solution, but definitely acceptable.
Option 2: Edit Scripts.js:
Navigate to /plugins/contact-form-7/includes/js/script.js, find $.fn.wpcf7NotValidTip function and replace entire code of that function with following code.
$.fn.wpcf7NotValidTip = function(message) {
return this.each(function() {
var $into = $(this);
$into.find(‘span.wpcf7-not-valid-tip’).remove();
$into.append(‘‘ + message + ‘‘);
if ($into.is(‘.use-floating-validation-tip *’)) {
$(‘.wpcf7-not-valid-tip’, $into).mouseover(function() {
$(this).wpcf7FadeOut();
});
$(‘:input’, $into).focus(function() {
$(‘.wpcf7-not-valid-tip’, $into).not(‘:hidden’).wpcf7FadeOut();
});
}
});
};
This jQuery fix makes sure the CF7 validation error disappears when it’s getting a click of the user.
You need to create documentation for these code file changes; so you can change code in future if plug-in developer update code in future upgrades.
