![\"Contact](\"http:\/\/www.effectualmedia.com\/blog\/wp-content\/uploads\/2017\/08\/form-validation.jpg\")
<\/p>\n<\/p>\n
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…)<\/p>\n
But problem is validation error don\u2019t 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.<\/p>\n
This post describes<\/strong> how you hide the validation error messages that Contact Form 7 produces.<\/p>\n Place following code before closing of head tag.<\/p>\n \njQuery(document).ready(function($) { <\/code><\/p>\n 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.<\/p>\n Navigate to \/plugins\/contact-form-7\/includes\/js\/script.js, find $.fn.wpcf7NotValidTip<\/strong> function and replace entire code of that function with following code.<\/p>\n $into.find(\u2018span.wpcf7-not-valid-tip\u2019).remove(); if ($into.is(\u2018.use-floating-validation-tip *\u2019)) { $(\u2018:input\u2019, $into).focus(function() { <\/code> 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.<\/p>\n","protected":false},"excerpt":{"rendered":" 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\u2019t disappear even after you filled all … <\/p>\nOption 1: jQuery Fix:<\/h3>\n
<\/p>\n
\n\t\/\/ clear cf7 error msg on mouseover
\n\t$(\".wpcf7-form-control-wrap\").mouseover(function(){
\n\t\t$obj = $(\"span.wpcf7-not-valid-tip\",this);
\n \t $obj.css('display','none');
\n\t});
\n});\n<\/p>\nOption 2: Edit Scripts.js:<\/h3>\n
<\/p>\n
\n$.fn.wpcf7NotValidTip = function(message) {
\nreturn this.each(function() {
\nvar $into = $(this);<\/code><\/p>\n
\n$into.append(\u2018\u2018 + message + \u2018<\/span>\u2018);<\/p>\n
\n$(\u2018.wpcf7-not-valid-tip\u2019, $into).mouseover(function() {
\n$(this).wpcf7FadeOut();
\n});<\/p>\n
\n$(\u2018.wpcf7-not-valid-tip\u2019, $into).not(\u2018:hidden\u2019).wpcf7FadeOut();
\n});
\n}
\n});
\n};\n<\/p>\n
\nThis jQuery fix makes sure the CF7 validation error disappears when it\u2019s getting a click of the user.<\/p>\n