WordPress.org

Forums

Contact Form 7
Validated required fields do not dissappear when corrected since update (10 posts)

  1. WebbKat
    Member
    Posted 1 year ago #

    After hitting send button the required fields pop up with a validation of 'Please fill the required field.' They use to disappear when the person goes to fill in the field, but now they don't. They just stay there. This started happening after the update.

    Is this something permanent for the update? or is it possible to make it work as it did before?

    (the only reason this is an issue is because i want my validations to pop-up over the input fields)

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

  2. WebbKat
    Member
    Posted 1 year ago #

    I would like the error messages disappear on hover or disappear when the input field is selected.

  3. Seitengestalter
    Member
    Posted 1 year ago #

    I also had this problem and solved it by changing a part of the code in the file script.js (contact-form-7/includes/js/script.js)

    Replace the complete function $.fn.wpcf7NotValidTip with the following code (taken from an older version of Contact-Form-7):

    $.fn.wpcf7NotValidTip = function(message) {
    		return this.each(function() {
    			var into = $(this);
    			into.append('<span class="wpcf7-not-valid-tip">' + message + '</span>');
    			$('span.wpcf7-not-valid-tip').mouseover(function() {
    				$(this).fadeOut('fast');
    			});
    			into.find(':input').mouseover(function() {
    				into.find('.wpcf7-not-valid-tip').not(':hidden').fadeOut('fast');
    			});
    			into.find(':input').focus(function() {
    				into.find('.wpcf7-not-valid-tip').not(':hidden').fadeOut('fast');
    			});
    		});
    	};

    It works for me.
    Roland

  4. dylanjameswagner
    Member
    Posted 1 year ago #

    I copied this into my site specific script file, not into the plugin directory script. Worked just fine. I also noted the last version this functionality was check in and didn't work for future removal.

    Thanks for posting. ;)

  5. danielvierab
    Member
    Posted 1 year ago #

    Thanks
    It's working when I replace it on plugin .js file, but I tried dylanjameswagner suggestion with no luck.
    I'm a designer and not a programmer. Please dylanjameswagner could you be a little more specific on how to do it with a site script file?
    I created a theme.js and loaded (both on header or footer) but it's not working.
    Not sure if my .js has everything needed.

    Thanks again

    Best Regards
    Daniel

  6. danielvierab
    Member
    Posted 1 year ago #

    I made it work, with a separate .js file, but only if I remove the part of the code on the plugin .js that defines the function

    $.fn.wpcf7NotValidTip = function(message) { .....

    What am I missing?

    Best Regards
    Daniel

  7. dylanjameswagner
    Member
    Posted 1 year ago #

    Sure thing. I just tested this with my current project.

    I link to a theme wide script file loaded in the footer.php just before the </body> tag, but before wp_footer(). Idk if the location matters, but it is working for me there.

    <script src="<?php bloginfo('stylesheet_directory'); ?>/-/scripts/custom.js"></script>

    In this script file I have only jQuery. Here is the whole file with the only the relevant parts.

    /* custom.js */
    
    jQuery(document).ready(function($){
    
    /* other non relevant jQuery, removed for this example... blah blah blah */
    
    /* plugin contact form 7 */
    /* hover effect broken in update - last checked in version 3.6 */
    
    	$.fn.wpcf7NotValidTip = function(message) {
    		return this.each(function() {
    			var into = $(this);
    			into.append('<span class="wpcf7-not-valid-tip">' + message + '</span>');
    			$('span.wpcf7-not-valid-tip').mouseover(function() {
    				$(this).fadeOut('fast');
    			});
    			into.find(':input').mouseover(function() {
    				into.find('.wpcf7-not-valid-tip').not(':hidden').fadeOut('fast');
    			});
    			into.find(':input').focus(function() {
    				into.find('.wpcf7-not-valid-tip').not(':hidden').fadeOut('fast');
    			});
    		});
    	};
    
    }); // .ready

    Maybe you didn't have the opening jQuery ready function? The rest of the code I believe is directly copied from the code above.

    On my site, once I included this in the script the fade-away-on-hover effect works. If i comment it out to test that functionality goes away.

    I intend to check from time to time to see if the original plugin functionality resumes working and then I can remove this code from my theme script entirely.

    Hope this helps, if not we I can try to help again. :)

  8. danielvierab
    Member
    Posted 1 year ago #

    Excelent Man
    You're a genius!!!!!!!

    Many thanks.

    Regards
    Daniel

  9. dylanjameswagner
    Member
    Posted 1 year ago #

    Great. :)

  10. das-joe
    Member
    Posted 1 year ago #

    thanks!! works like a charm :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic