Skip to content
Related Articles

Related Articles

Foundation CSS Abide Initial State

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 17 Mar, 2022
View Discussion
Improve Article
Save Article

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.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Abide Initial State</title>
    <link rel="stylesheet" 
          href=
    <script src=
    </script>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>Foundation CSS Abide Initial State</h3>
  
    <form data-abide>
        <div data-abide-error 
             class="alert callout"
             style="display:none;">
            <p>There are some errors in the form.</p>
  
        </div>
        <label>
            GFG Courses
            <input id="gfg"
                   aria-describedby="gfg"
                   type="text" required>
            <span id="gfg" class="form-error">
                This field is required.
            </span>
        </label>
        <button class="button" type="submit">
            SUBMIT
        </button>
        <button class="button" type="reset">
            RESET
        </button>
    </form>
  
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
  
</html>


Output :

Foundation CSS Abide Initial State

Foundation CSS Abide Initial State

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

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Abide Initial State</title>
    <link rel="stylesheet" 
          href=
    <script src=
    </script>
    <link rel="stylesheet" 
          href=
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>Foundation CSS Abide Initial State</h3>
  
    <form data-abide>
        <div data-abide-error 
             class="alert callout"
             style="display:none;">
            <p>There are some errors in the form.</p>
        </div>
        <label>
            GFG Courses (input field disabled)
            <input id="gfg" 
                   aria-describedby="gfg" 
                   type="text"
                   required disabled>
            <span id="gfg" class="form-error">
                This field is required.
            </span>
        </label>
        <button class="button"
                type="submit">
          SUBMIT
        </button>
        <button class="button"
                type="reset">
          RESET
        </button>
    </form>
  
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
  
</html>


Output:

Foundation CSS Abide Initial State

Foundation CSS Abide Initial State

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!