Help text - mosbymc/validator GitHub Wiki

Help text

If you would like help text to display for your input when a user focuses on it, add a span above the input in the DOM, but as close to a sibling as possible to it. Give the span a class called “helpText” and “hideMessage”, and whatever text is inside of the span will be displayed next to the input when the user focuses on the input and removed when they blur the input.

    <span class="helptext hideMessage">Password must be at least 8 characters and include both upper and lower case letters and a number.</span>
    <input type="text" id="password" data-validationrules="password"/>

Help text is also be affected by the data-location attribute, data-displayon attribute, and the data-offsetwidth and data-offsetheight attributes of the input. So if error messages are displayed on the bottom of the input with a width offset of 20 pixels, the help text will be as well. Note that the span should be hidden from view when the page loads, so adding the “hideMessage” class is necessary in addition to the “helpText” class. This needs to be done by the developer because while the validator could hide the spans on the page when it loads, any dynamically added spans, including those from different views, will not be hidden since the validator is only initialized once.

Continue to: Additional Options