Error message display options - mosbymc/validator GitHub Wiki

##Display Options:

By default, all error messages will be displayed all the time next to the inputs that failed validation. There are a few options available to change the way the error message are displayed.

Hover

To make the error message only display when hovering over a specific input, add a class to the parent element for form validation or the individual input for input validation called “hover”. This will hide the error message div when not hovering over an input that failed validation.

    <fieldset class="formValidate hover" data-formaction="submitThisForm">

Group by input

You can also group all the errors in a statically placed div next to each input rather than have fixed positioned divs that “stack” out from the input in whatever direction is specified. To group errors by input, add a class to the parent container for form validation or the input for single input validation called “groupByInput”.

    <fieldset class="formValidate groupByInput" data-formaction="submitThisForm">

Grouping elements by input will also look for a "data-location" attribute on the form element you are using. This attribute can have the values of: right, left, top, or bottom. The attribute instructs the validator on where to place the new div with respect to the input. If left blank, the validator will default to the right.

Note that when grouping errors by input, if the errros are displayed on the left or right of the input, they'll receive the class, "hInputGroup", and if they are displayed on the top or bottom on the input, they'll receive the class, "vInputGroup". As with all the class used in validator.css, these are yours to style, but they'll likely need more styling than most depending on the layout of your form/webpage.

Group by form

If you would like to group all the errors in a div rather than display them next to each input, you need to make a container element for the error messages. You can place the container anywhere on the page and style it however you like. The parent form needs an added class called “data-grouperrors” with the value set to the id of the error container. By default, only the error messages are moved into the group container, so to indicate which error belongs to which input, each input should have an attribute called “data-errorprefix”, the value of which will the prepended to the error message and can be used to tie each error message to the input it’s referring to.

    <fieldset data-grouperrors="showErrors" class="formValidate highlightErrors" data-formaction="submitThisForm">
       <legend>Group Validation</legend>
       <div id="showErrors" class="hideGroupedErrors">
          <h3 class='errorMsg'>There was a problem with your request.</h3>
       </div>

Continue to: Error Message Placement