WordPress.org

Support

Support » Plugins and Hacks » [Resolved] Validation Errors don't disappear when trying to correct form field

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

Viewing 15 replies - 1 through 15 (of 30 total)
  • +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.

    buzztone
    Participant

    @buzztone

    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 http://wiki.simple-press.com/installation/troubleshooting/plugin-conflicts/ for general guidance.

    buzztone
    Participant

    @buzztone

    @achenseeRE: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 http://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…

    futurecar
    Member

    @futurecar

    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.

    buzztone
    Participant

    @buzztone

    @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?

    Plugin Author Takayuki Miyoshi
    Participant

    @takayukister

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

    Todd
    Participant

    @toddedelman

    @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!!

    Plugin Author Takayuki Miyoshi
    Participant

    @takayukister

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

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

    Denis Creative
    Member

    @denis-creative

    @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 http://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: http://www.kapittelhof.nl/inschrijven/nieuwe-patient

    Todd
    Participant

    @toddedelman

    @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.

    Denis Creative
    Member

    @denis-creative

    @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.

Viewing 15 replies - 1 through 15 (of 30 total)
  • The topic ‘[Resolved] Validation Errors don't disappear when trying to correct form field’ is closed to new replies.