[Plugin: Contact Form 7] Adding Classes to Invalid Labels/Inputs

Resolved Ryan Thaut
(@rthaut)

12 years, 6 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/

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author

Takayuki Miyoshi

(@takayukister)

12 years, 6 months ago

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

SachaG

(@sachag)

12 years, 4 months ago

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

duckz

(@supersuphot)

12 years, 4 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

duckz

(@supersuphot)

12 years, 4 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

stanlus

(@stanlus)

12 years, 2 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;
}

Thread Starter

Ryan Thaut

(@rthaut)

11 years, 8 months ago

So I see this has been partially implemented in one of the updates since I posted my workaround, so I just wanted to say thank you!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘[Plugin: Contact Form 7] Adding Classes to Invalid Labels/Inputs’ is closed to new replies.