We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 21122
    • 153 Posts
    Hi there,

    I have a FormIt form. Its working fine and everything, but I’d like the error message to be displayed in a certain way.

    Here is my Form:

    <div id="newsletter">
    
    <p>Subscribe to our mailing list for the latest offers!</p>
    
    [[!FormIt?
       &hooks=`spam,email,redirect`
       &emailTpl=`NewsletterForm`
       &emailTo=`[email protected]`
       &redirectTo=`25`
       &validate=`email:email:required`      
    ]]
    [[+!fi.error.error_message:notempty=`
    <p>[[!+fi.error.error_message]]</p>
    `]]
    <form class="form" action="[[~[[*id]]]]#nav" method="post">
        <input name="nospam:blank" type="hidden" />
    <span class="error">[[+fi.error.email]]</span>
    
    <label for="email" title="Your email address">Email : </label>
    <input type="text" id="email" name="email" size="30" maxlength="64" title="Enter your email address" value="[[+fi.email]]" class="textinput" />
    <input type="submit" name="submit" value="Go!" title="Sign up to our newsletter" class="submit" />
    
    </form>
    
    </div>


    Now I have a short paragraph there, and I’d like that text to be overwritten with my validation error. So when the user submits the form, if there was an error, the line ’Subscribe to our mailing list for the latest offers!’ would disappear and be replaced with ’Please enter a valid e-mail address’ or similar.

    Is this possible with a bit of PHx maybe?

    Thanks
      • 27519
      • 275 Posts
      Maybe you can solve that using a custom hook and a bit of Javascript/CSS by hiding and showing the appropriate <p>.

      Create a separate <p> with your error with CSS attr display: none. Fill <p> with error in your custom hook. Then let a Javascript check for content in the error <p>. Hide your welcome <p> and show your error <p>. You can use jQuery for neat effects and easy access to all the CSS attribute using the toggle feature.

      http://rtfm.modx.com/display/ADDON/FormIt.Hooks

        MODx Revolution / MAMP / OS X