Foundation CSS Abide Error State
Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Abide in Foundation CSS is a form validation library that is used to validate the form with custom validators. Foundation CSS Abide Error State is used to specify that a particular field’s input in a form is in an error state. It is helpful when the field is required or when the user inputs invalid form details.
Foundation CSS Abide Error State classes:
- alert callout: It is used to display a red-colored warning box if the field is in an error state.
- is-invalid-input: Check if the input is valid according to the input tags used.
- form-error is-visible: To show that the field is required.
Foundation CSS Abide Error State attributes:
- data-abide: This attribute is used to define that the form is validated using abide.
- data-abide-error: This attribute is used to specify that the element is in an error state.
- type = ”hidden”: This type of attribute is used to hide the element.
- type = ”reset”: This type of attribute is used to reset/empty the form.
- disabled: This type of attribute is used to disable any input of the element.
<form data-abide> <div data-abide-error class="alert callout" ...> </div> <input class="is-invalid-input" aria-invalid="true" ...> <span class="form-error is-visible">...</span> ... </form>
Example 1: This example illustrates the abide initial state in Foundation CSS.
Example 2: This example illustrates the abide error state in Foundation CSS.
Example 3: This example illustrates the abide error state with the input tag disabled in Foundation CSS.