guards.js

View the Project on GitHub on-site/guards.js

Styling

How to style guards

After you have your forms guarded properly, the next step is to style the error messages and invalid fields. This is made easier with classes added to the relevant fields. An error message for a field that has a guard error will (by default) have the class error-message. The field that triggered the guard error will (by default) have the class invalid-field. Below is an example of how these classes can be used to style the guarded fields.

Programmatic styling

If you don't wish to do your styling via inline or external file css declarations, guards has you covered! You can add styling to your page via the style method. This method merely appends a style block into your document which adds some default (or configurable) styles for elements with errors and the related error messages. This programmatic styling can also be scoped to specific css selectors, to ensure it is targeted to just a specific section of your page, if you so wish. See below for an example of programmatic styling.

previous