Text positioning in validation error div

Gravity Support Forums » Plugin Support » Gravity Forms

Robsticles
Member

I've noticed that the validation error text is wrapped in div tags but nothing else. Is it possible to wrap the text in <p> or <span> tags so I can position the text? I'm trying to add a small warning icon on the left side of the text.

Thanks

Posted 12 years ago on Wednesday April 25, 2012 | Permalink
David Peralty

All validation errors have classes assigned to them that you can hook into via CSS.
One should be .validation_error and the other should be .validation_message.

Posted 12 years ago on Wednesday April 25, 2012 | Permalink
Kevin Flahaut
Administrator
You don't need any additional markup to target/style the validation message. You can easily do so with inheritance from the containing div. For example..
```
[css]
body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message {
	padding-left: 20px !important;
	background-image: url("http://games-ak.espn.go.com/s/minigames/i/trivia/alert_icon.png");
	background-repeat: no-repeat;
	background-position: 0 9px
}
```
test screenshot: http://bit.ly/IcyIyH

You can find out more about how to properly target the form elements for styling (with samples) in the documentation here.

http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples
Posted 12 years ago on Wednesday April 25, 2012 | Permalink
Robsticles
Member

Hi David,

Thanks for getting back to me. I understand that validation errors have classes assigned to them, but if you have a look at the HTML below you'll see what I mean. I need to position the text in the div. Without <p> or <span> tags I can only target the div not the text inside it.

<div class='gfield_description validation_message'>This field is required.</div>

I've been experimenting and I've added some HTML to the "validation message" box under the advanced tab of the form fields like this:

<span class="error_icon"></span><p>This field is required.</p>

Now I can position the text and icon but I have to add it to every form field. Is there any other way I can do it?

Posted 12 years ago on Wednesday April 25, 2012 | Permalink
David Peralty

Kevin's example is exactly what you are looking for as it requires no extra markup to make happen.

Posted 12 years ago on Wednesday April 25, 2012 | Permalink
Robsticles
Member

Ok I got it working now. Thanks!

Posted 12 years ago on Wednesday April 25, 2012 | Permalink
David Peralty

Glad to hear it. :)

Posted 12 years ago on Wednesday April 25, 2012 | Permalink

This topic has been resolved and has been closed to new replies.