WordPress.org

1. rthaut
   Member
   Posted 8 months ago #

   Has anyone found a proper way to add error classes to the fields and corresponding labels that did not pass validation when using AJAX form submission?

   The only way I have found to do this is to add the following code to the $.fn.wpcf7NotValidTip() function in scripts.js:

   into.find(':input').addClass('wpcf7-not-valid-field');
   $("label[for='" + into.find(':input').attr('id') + "']").addClass('wpcf7-not-valid-label');

   And of course logic for removing the additional classes on the .focus() event:
   

   into.find(':input').removeClass('wpcf7-not-valid-field');
   $("label[for='" + into.find(':input').attr('id') + "']").removeClass('wpcf7-not-valid-label');

   Obviously, this is not an ideal solution. I have not been able to find anything on these forums, nor via many Google searches.

   If the author sees this, can this (or something similar) be added as an enhancement? It is very useful to actually style the invalid inputs and labels, rather than just displaying an error message beside them.

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

2. Takayuki Miyoshi
   Member
   Posted 8 months ago #

   This makes sense. I'll consider it for the next version. Thanks.

3. SachaG
   Member
   Posted 5 months ago #

   That would be very helpful, and is something most contact forms usually do.

4. supersuphot
   Member
   Posted 5 months ago #

   Yes I agree, need inout field to have an error class, I do my own, but it will gone after update contact form 7

5. supersuphot
   Member
   Posted 5 months ago #

   the other way is to de_register script.js in contact form 7 plugin folder.
   copy script.js to theme folder and update javascript as you needed and then register script there. so no change has gone after update folder contact form 7 when plugin upgrade

6. stanlus
   Member
   Posted 3 months ago #

   Hi all,

   here is the complete patch of fn.wpcf7NotValidTip:
   Would be nice to have it in the next release. As it makes us more flexible on highlighting validation errors.

   $.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');
                   /* Patch for "Adding Classes to Invalid Labels/Inputs" by rthaut
                    * URL: http://wordpress.org/support/topic/plugin-contact-form-7-adding-classes-to-invalid-labelsinputs?replies=5
                    * @author: rthaut, implemented by sspies
                   */
                   into.find(':input').removeClass('wpcf7-not-valid-field');
                   $("label[for='" + into.find(':input').attr('id') + "']").removeClass('wpcf7-not-valid-label');
                   //end Patch
   			});
               //Start Patch
               into.find(':input').addClass('wpcf7-not-valid-field');
               $("label[for='" + into.find(':input').attr('id') + "']").addClass('wpcf7-not-valid-label');
               //end Patch
   		});
   	};

   CSS lookes than like:
   

   #wpcf7 .wpcf7-not-valid-field {
     border: 1px solid #ff0000 !important;
   }
   #wpcf7 .wpcf7-not-valid-label {
     color: #ff0000;
   }
   #wpcf7 .wpcf7-not-valid-tip {
     display: none;
     visibility: hidden;
   }

Reply

You must log in to post.