Foundation CSS Abide Accessibility

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= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 
            crossorigin="anonymous"> 
    </script> 
    <link rel="stylesheet"
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <style> 
        body 
        { 
            margin-left:10px; 
            margin-right:10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;">w3wiki</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

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 
            crossorigin="anonymous"> 
    </script> 
    <link rel="stylesheet"
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <style> 
        body 
        { 
            margin-left:10px; 
            margin-right:10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;">w3wiki</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

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

HTML

HTML

Contact Us