We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 32046
    • 75 Posts
    Is it possible to output an error message next to each field. ie, if an input email address is invalid the email address field is then either highlighted or an error message or error icon is placed next to the actual field as opposed to the blanket error message via [+validationmessage+].
    I can do the CSS etc easily enough, I’m basically wanting to know if there is a variable I can check to determine if a certain field has a error.
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      Use the parameters for setting classnames:

      # &requiredClass (new in 1.4.2) (optional)
      Css class name. Will add class in (empty) required form fields on validation. Existing classes will be preserved.

      If you have already set a class for a field or label and you get unexpected css results check the order in which you have declared the classes. The &requiredClass is added to the beginning of any classes already set.

      # &invalidClass (new in 1.4.2) (optional)
      Css class name. Will add class in invalid form fields on validation. Existing classes will be preserved.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 32046
        • 75 Posts
        Hi Susan,
        Thanks for that. I appreciate &requiredClass and &invalidClass offer basic formatting options via CSS.
        However, if I want more control, for example if I wanted to put a bordered <div> around the entire label and input box section. How can I apply the class to that <div>? Normally (when not using MODx, but rather a framework like Kohana or Code Igniter) I would need to check an error variable for the particular input: ie

        if($error[’email_input’])
        echo ’<div class="error">’;
        else
        echo ’class="<div class="">’;

        ....followed by the <label>, <input> and </div>