PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Text positioning in validation error div

  1. 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 9 years ago on Wednesday April 25, 2012 | Permalink
  2. 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 9 years ago on Wednesday April 25, 2012 | Permalink
  3. 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 9 years ago on Wednesday April 25, 2012 | Permalink
  4. 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 9 years ago on Wednesday April 25, 2012 | Permalink
  5. David Peralty

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

    Posted 9 years ago on Wednesday April 25, 2012 | Permalink
  6. Robsticles
    Member

    Ok I got it working now. Thanks!

    Posted 9 years ago on Wednesday April 25, 2012 | Permalink
  7. David Peralty

    Glad to hear it. :)

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

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