WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Validation Errors don't disappear when trying to correct form field (28 posts)

  1. Todd
    Member
    Posted 7 months ago #

    Hi there

    Usually, when someone tries to click back into the form field that has an error, the validation message disappears. I've had this work automatically on most of my sites.

    Now, on http://bit.ly/1dT6HJa, the validation boxes stay in place and the user can't see the form field to fix his error.

    Any ideas how to fix this?

    Thanks!

    http://wordpress.org/plugins/contact-form-7/

  2. achensee
    Member
    Posted 7 months ago #

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

  3. buzztone
    Member
    Posted 7 months ago #

    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.

  4. buzztone
    Member
    Posted 7 months ago #

    @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 http://wp.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins/

  5. achensee
    Member
    Posted 7 months ago #

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

  6. futurecar
    Member
    Posted 7 months ago #

    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.

  7. buzztone
    Member
    Posted 7 months ago #

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

  8. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 7 months ago #

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

  9. Todd
    Member
    Posted 7 months ago #

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

  10. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 7 months ago #

    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;
    }
  11. achensee
    Member
    Posted 7 months ago #

    @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');
    	});
    });
  12. Denis Creative
    Member
    Posted 7 months ago #

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

  13. wjweb
    Member
    Posted 7 months ago #

    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

  14. Todd
    Member
    Posted 7 months ago #

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

  15. Denis Creative
    Member
    Posted 7 months ago #

    @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>
  16. wjweb
    Member
    Posted 7 months ago #

    hi Denis, thanks a lot! That worked.

  17. Todd
    Member
    Posted 7 months ago #

    Thanks. I've added this and it works.

    But I think this is a bigger issue that @Takayuki should be fixing within the plugin. I hate adding additional javascript to my sites.

  18. arthurrr
    Member
    Posted 7 months ago #

    add this script before
    </head>

    What is the file to edit?
    Where is the .css of "contact form 7", i don't see this in the Wp-admin

    Thanks

  19. Sormano
    Member
    Posted 6 months ago #

    So I made a same like fix as @achensee (and made multiple).

    This fix makes sure that only the validation error dissapears of the element you are on.

    Error dissapears on hover

    jQuery( ".wpcf7-form-control-wrap" ).hover( function() {
    	jQuery( this ).children( ".wpcf7-not-valid-tip" ).css( "display", "none" );
    });

    Error dissapeasr on click

    jQuery( ".wpcf7-form-control-wrap" ).hover( function() {
    	jQuery( this ).children( ".wpcf7-not-valid-tip" ).css( "display", "none" );
    });

    CSS fix, error dissapears on hover and focus of the element

    .wpcf7-form-control-wrap:hover .wpcf7-not-valid-tip, .wpcf7-form-control:focus + .wpcf7-not-valid-tip { display:none; }

    Hope this helps :)

  20. buzztone
    Member
    Posted 6 months ago #

  21. Sormano
    Member
    Posted 6 months ago #

    I see i made an error while copying, hereby the right code for Error dissapearing on click:

    jQuery( ".wpcf7-form-control-wrap" ).click( function() {
    	jQuery( this ).children( ".wpcf7-not-valid-tip" ).css( "display", "none" );
    });
  22. dreamholiday4u
    Member
    Posted 6 months ago #

    what file do you edit please?
    I want to edit but am having trouble finding the </head> tag

  23. Sormano
    Member
    Posted 5 months ago #

    In your theme folder there should be a header.php, where you will find the <head></head> tags.

    You should place this code between

    <script type="text/javascript">
    [code of your desire]
    </script>

    Hope this helps.

  24. threemind
    Member
    Posted 5 months ago #

    Hi Denis, thanks!

  25. donpro
    Member
    Posted 4 months ago #

    Thanks for the solution. This solution does fix the issue but causes other problems.

    Go to: http://www.drainsenseplumbing.com/contacts/
    Go to the Contact form. Do not enter any data. Just press SEND.
    Do you see the two messages about "Please fill the required field"?

    Click on "Name" and enter any text. So far so good.
    No click on "Email". You will see the NAME text vanish and the error message disappear.

    This is not a working solution. Can you please provide a better one?

  26. donpro
    Member
    Posted 4 months ago #

    Typo:

    No click on "Email". You will see the NAME text vanish and the error message reappear.

  27. donpro
    Member
    Posted 4 months ago #

    Hi again,

    The solution suggested by Denis Creative is working. Unfortunately, the solution provided by Sormano does not work properly.

    Thanks / Don

  28. HOPETHISWORKS
    Member
    Posted 2 months ago #

    REGARDING THE MESSAGE: "@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');
    });
    });"

    Did we conclude what the solution is and where the change occurs? I've read through the messages above and am a bit confused as to what the firm solution is.

    SOLUTION=?
    MAKE EDIT IN FILE (or PAGE): __________

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.