Open In App

Foundation CSS Abide

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device.

Abide in Foundation CSS is a form validation library that is used to validate the form with custom validators.

Initial State: 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.

Error State:  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.

Ignored Inputs:  Ignored input is one of the validators in abiding that ignores, disables, or hides the input fields.

Required Radio and Checkbox: required and data-min-required are two attributes used with checkboxes and radio to require all the fields and to require a minimum number of given fields respectively.

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>
        <!-- Add "display: none" right away -->
        <div data-abide-error class="alert callout" 
            aria-live="assertive" style="display:none;">
            <p><i class="fi-alert"></i
               There are some errors in your form.
            </p>
        </div>
        <label>
            Name
            <input id="example4Input" 
                   aria-describedby="example4Error" 
                type="text" required>
            <span id="example4Error" class="form-error">
                This field is required.
            </span>
        </label>
    </form>
  
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
</html>


Output:

 

Example 2: This example illustrates the abide error state in Foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Abide Error State</title>
    <link rel="stylesheet" href=
         crossorigin="anonymous">
    <script src=
           crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <style>
       body
       {
            margin-left:10px;
            margin-right:10px;
       }
    </style>
</head>
  
<body>
  
    <h1 style="color:green;">GeeksforGeeks </h1>
  
    <h3>Foundation CSS Abide Error State</h3>
    <form data-abide>
        <div data-abide-error 
             class="alert callout" 
             aria-live="assertive" 
             role="alert" 
             style="display:block;">
            <p><i class="fi-alert"></i
              There are some errors in your form.</p>
        </div>
  
        <label class="is-invalid-label">
            GFG
  
            <input id="example4Input" 
                   aria-describedby="example4Error" 
                 type="text" required 
                   class="is-invalid-input"
                aria-invalid="true">
            <span id="example4Error" 
                  class="form-error is-visible">
                This field is required.
            </span>
        </label>
    </form>
  
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
</html>


Output:

 

Reference: https://get.foundation/sites/docs/abide.html#event-listener



Last Updated : 18 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads