Foundation CSS Abide Initial 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 Initial State is used to specify that an input field in a form is in the initial/starting state. It is useful to create forms with different custom validator attributes. There are several different ways to add error states, ignored inputs, compulsorily required checkbox, or radiobox. Here, the basics of form initial state creation are discussed.

Foundation CSS Abide Initial State Classes:

• is-invalid-input: This class is used to enable checking if the input is valid according to the input tags used.
• form-error is-visible: This class is used to show that the field is a must required.

Foundation CSS Abide Initial 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.

Syntax:

<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.

Output :

👁 Foundation CSS Abide Initial State

Example 2 : This example illustrates the abide Initial state with input field disabled in Foundation CSS.

Output:

👁 Foundation CSS Abide Initial State

Reference: https://get.foundation/sites/docs/abide.html#initial-state