Validation Errors don't disappear when trying to correct form field

+1 for us, but we created a quick workaround adding the follwing jQuery Script:

jQuery(document).ready(function($) {
	// clear cf7 error msg
	$("input[type=text], input[type=password], textarea").focus(function(){
    	$(".wpcf7-not-valid-tip").css('display','none');
	});
});

This is not the best solution because it clears all err msgs, but it does the job for now.

Hi.

This is most likely due to a Javascript conflict with either your current WordPress theme or one of the other plugins you are using – see Contact Form 7 Email Issues – there is a link there that covers Javascript Conflicts.

Use Firebug or Chrome Dev Tools to examine Javascript conflicts in detail.

Remember that a problem in one script can cause issues in another.
For example, some jQuery errors can stop jQuery processing any more script, which can make the culprit hard to find. A jQuery error in one of your plugins or your themes javascript files can stop jQuery processing before it gets to the CF7 script.

See https://wiki.simple-press.com/installation/troubleshooting/plugin-conflicts/ for general guidance.

@achensee – RE:This is not the best solution because it clears all err msgs, but it does the job for now

You’re right – looks like your hiding the symptom rather than dealing with the root cause at this stage. You have my sympathy. There are so many poorly written themes and plugins that cause Javascript conflicts with popular plugins like CF7.

Problems are mostly due to not enqueing Javascript correctly, which is poor coding practice that creates a strong risk of conflicting with other themes and plugins – see https://wp.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins/

@buzztone, thanks for your sympathy. but this issue does not depend on a specific theme or a plugin conflict. a possible reason could also be a browser conflict, since CF7 migrated to html5 input types…

Can definitely say its not a theme issue as I have tested multiple and they all do the same thing. In fact, I think the newer version of CF7 doesn’t have the mouseover ability anymore only previous versions. Its just text that appears above a field in a div (in a vertical form) and that’s it. A little frustrating for me because now I can’t really require anything until a solution is found.

@takayuki – I can confirm this unexpected change in behavior between WordPress 3.7.1 with Contact Form 7 Version 3.5.4 and WordPress 3.8 with Contact Form 7 Version 3.6.

In WP-3.8 CF7-3.6 Validations Errors are NOT hidden on-mouseover of individual input fields as is done in WP-3.7.1 CF7-3.5.4. Was this intended?

Yes, it it intended. Floating validation tip has been removed for accessibility improvement. See the chengelog of v3.6.

@takayuki – If this floating validation was removed intentionally, can you provide us with a solution to fix our problem.

It’s impossible that the errors will stay on top of the form fields. It makes using “required” impossible.

Please provide a fix or clear instructions ASAP.

Thanks!!

Todd, yours is a theme issue. Your theme’s stylesheet has this style rule. Try removing it.

https://www.jmbdavis.com/jmb/wp-content/themes/lawyer/style.css

.wpcf7 span.wpcf7-not-valid-tip {
    background: none repeat scroll 0 0 #DD0000;
    border-radius: 3px;
    color: #FFFFFF;
    left: 70px;
    padding: 2px 8px;
    position: absolute;
    top: 7px;
}

@todd and all others, who want to have the error msg above the input field and need disappear on mouseover, add this script to the head, and everything works again:

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');
	});
});

@achensee

Thanks, it’s work!

But I have another problem. And I think it’s a serious problem.
In the Google Chrome I need click on the Send button twice! Because from the first click nothing happends! It’s started after updating CF7. What is the problem in the Chrome?
In the other browsers all works fine from the first click.

My testing Form is here https://17.sigma.in.ua/raschet-stoimosti-zdaniya/

for the less gifted coding individuals; where exactly do i place this code?

I have exactly the same problem on this page: https://www.kapittelhof.nl/inschrijven/nieuwe-patient

@takayuki

As you can see on this post from the theme’s support forum, the solution you suggested does not fix the problem.

Please advise further.

@wjweb
add this script before
</head>

<script type="text/javascript">
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');
	});
});
</script>

hi Denis, thanks a lot! That worked.