Error message placement - mosbymc/validator GitHub Wiki

##Error message placement:

By default, the form will display all error message divs to the right of the input that failed validation.

Placing error relative to input

If you want to change the placement of the error div, add an attribute called “data-location” to the input. The values can be: top, bottom, left, or right. The error message div is still placed in relation to the input, but it will on the corresponding side of that input. For left and right placements, if there is more than one validation rule that is failed, the error messages will be placed further out to the left or right respectively. For top and bottom, the errors will be stacked on top of each other in the appropriate direction.

    <input type="text" data-location="bottom" data-validationrules="phone"/>

Display the error message on another element

Occasionally, when using another library’s input widgets, two inputs will be used even though only one is visible at any given time. Effectively one input overlays the other depending on the focus of the inputs. If the input you’re validating is hidden when the user blurs, then the error message div won’t be displayed if the hover option is turned on, and any css you use to highlight the input field also won’t be seen. To avoid this, an attribute called “data-displayon” can be added to an input. This will allow validation to occur for the input, but it will display on the visible input that is used when blurred. The value should be a css selector; a class name (with the preceding “.”), or an id (with the preceding “#”), as well as the location of the other element in the DOM relative to the validated input; ie up or down. Up refers to any direct parent or any sibling/cousin/etc. that appears above the element in the HTML source. Down refers to any direct parent or any sibling/cousin/etc. that appears below the element in the HTML source.

Because the dynamically added inputs used by widgets don’t usually have an id, the class name will work, but the validator needs to know to search above or below the input that it is currently validating. It will use the first match in the dom that it finds in the direction it is searching. If no match is found, it will display the error message div on the actual input it validated.

This functionality can also be used to change the location of the error message div even if there isn’t an overlayed element on top of it. If for some reason you want to display the error message somewhere else, just add the displayon attribute and give it the element and location (up or down) of the element it should display the error message on, and the validator will adjust the location accordingly.

In the HTML snippet below, the "Last Name" input will be validated, but any validation errors will be displayed on the "displayHere" input.

    <dt><label for='lName'>Last Name: </label></dt>
    <dd><input type='text' data-validationrules="name" data-displayon="#lNamedisplayOn,down"/></dd>
    <dt><label for="displayHere">Last Name Error Here: </label></dt>
    <dd><input type="text" id="displayHere"/></dd>

Offsetting error messages

By default, the error message div is placed 5 pixels away from whatever element it is displayed on. To adjust the offset, add an attribute called “data-offset” to the input. The value should be the number of pixels you want to offset the div from the element where the error message div is being displayed. All subsequent error message divs for that input will continue to be displayed with that offset.

    <input type="text" data-offsetwidth="100" data-offsetheight="50" data-validationrules="phone"/>

Continue to: Help Text

⚠️ **GitHub.com Fallback** ⚠️