Using default form feedback

When is it used?

If you don't provide your own handler for the onValidate method of your glow.forms.Form instance, the default will be used.

The default method outputs plain unstyled HTML in places which are accessible to screen readers and text browsers. You are responsible for their visual appearence, Glow doesn't impose any kind of design.

When your form fails validation, contextual errors are generated. If the user attempted to submit the form a summary of errors is also generated at the top of the form.

Contextual errors

Contextual errors are designed to appear alongside the relavent field and are generated every time validation occurs. A span with class "glow-errorMsg" is generated containing the error message.

This error will be placed in the field's label by default. The field also gets the class name "glow-invalid".

<!--before validation-->
<p> <label for="username"> Username: <input type="text" name="username" id="username" /> </label>
</p> <!--after validation-->
<p> <label for="username"> Username: <input type="text" name="username" id="username" class="glow-invalid" /> <span class="glow-errorMsg"> You must enter a username </span> </label>
</p>

you can override the location of the error message by giving an element a class name in the format "fieldName-msgContainer". So, if your input had name="username", the function would try and put the error message in the element with class "username-msgContainer"

<!--before validation-->
<fieldset> <legend class="emailFormat-msgContainer"> Email format </legend> <p> <input type="radio" name="emailFormat" value="plain" id="emailFormatPlain" /> <label for="emailFormatPlain">Plain</label> </p> <p> <input type="radio" name="emailFormat" value="html" id="emailFormatHtml" /> <label for="emailFormatHtml">HTML</label> </p>
</fieldset> <!--after validation-->
<fieldset> <legend class="emailFormat-msgContainer"> Email format <span class="glow-errorMsg"> You must choose an email format </span> </legend> <p> <input type="radio" name="emailFormat" value="plain" id="emailFormatPlain" class="glow-invalid" /> <label for="emailFormatPlain">Plain</label> </p> <p> <input type="radio" name="emailFormat" value="html" id="emailFormatHtml" class="glow-invalid" /> <label for="emailFormatHtml">HTML</label> </p>
</fieldset>

You must do this for fields with multiple inputs with the same name, such as sets of radio buttons. We recommend wrapping the radio buttons in a fieldset, with the question and error message in the legend as above.

Screenreaders similar to JAWS will read out the parent fieldset's legend and the field's label when the user focuses a form field.

Summary Error

The summary of errors is generated when the user attempts to submit a form with errors. A div with class "glow-errorSummary" is generated as the first child of the form containing a list of errors.

The output will be in the format:

<div class="glow-errorSummary"> <ul> <li> Form Item: Error Message </li> <li> Form Item: Error Message </li> </ul>
</div>

If the form field has a single input, "Form Item" will be replaced with the text from the label, else it will use the name of the form field.

You can overwrite this by giving an element a class name in the format "fieldName-prompt".

A form like this:

<p> <label for="username"> User Name: </label> <input type="text" name="username" id="username" />
</p>
<fieldset> <legend class="emailFormat-msgContainer emailFormat-prompt"> Email format </legend> <p> <input type="radio" name="emailFormat" value="plain" id="emailFormatPlain" /> <label for="emailFormatPlain">Plain</label> </p> <p> <input type="radio" name="emailFormat" value="html" id="emailFormatHtml" /> <label for="emailFormatHtml">HTML</label> </p>
</fieldset>

Would, assuming all fields were left blank, generate an error summary like:

<div class="glow-errorSummary"> <ul> <li> User Name: You must enter a user name </li> <li> Email Format: You must select an email format </li> </ul>
</div>

Notice how "Email Format" is picked up from the legend of the fieldset, because it has class "emailFormat-prompt". This is recommended practice for sets of radio buttons and checkboxes.