Open In App

Foundation CSS Abide Accessibility

Improve
Improve
Like Article
Like
Save
Share
Report

Abide in Foundation CSS is a structure approval library that is utilized to approve the structure with custom validators.

Foundation CSS Abide Structure:

  • Beginning State: Foundation CSS Stand Beginning State is utilized to determine that an info field in a structure is in the underlying/beginning state. It is valuable to make structures with various custom validator ascribes.
  • Error State: Foundation CSS Stand Mistake State is utilized to determine that a specific field’s contribution to a structure is in a mistaken state. It is useful when the field is required or when the client inputs invalid structure subtleties.
  • Overlooked Data sources: Disregarded input is one of the validators in withstanding that disregards, debilitates, or conceals the information fields.
  • Required Radio and Checkbox: Required and information min-required are two credits utilized with checkboxes and radio to require every one of the fields and to separately require a base number of given fields.

Example 1: This example shows the withstand mistake state in Foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <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="model4Input" 
                   aria-describedby="model4Error" 
                   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:

Foundation CSS Abide Accessibility

Foundation CSS Abide Accessibility

Example 2: This example shows the stand Beginning state in Foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <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 Beginning State</h3>
  
    <form data-abide>
        <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="model4Input"
                 aria-describedby="example4Error"
                 type="text"
                 required>
            <span id="model4Error"
                  class="form-error">
                This field is required.
            </span>
        </label>
    </form>
  
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
  
</html>


Output:

Foundation CSS Abide Accessibility

Foundation CSS Abide Accessibility

Reference: https://get.foundation/sites/docs/abide.html



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