Open In App

Foundation CSS Abide Required Radio & Checkbox

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and JavaScript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.

In Foundation CSS, Abide is a form validation library that is used to validate the form with custom validators.  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.

Foundation CSS Abide Required Radio & Checkbox Attributes used:

  • required: This attribute is used to specify that the whole set of checkboxes/radio is required.
  • data-min-required: This attribute is used to specify a minimum number of checkbox/radio is required. Note that the by default minimum number of required field is 1.

Syntax:

<form data-abide novalidate>
 <fieldset>
   <input type="radio" required
     name="..." id="..." value="...">
   <label for="...">...</label>
   
   <input data-min-required="2" type="checkbox"
     name="..." id="..."
     value="...">
     
   <label for="...">....</label>  
 </fieldset>
</form>

Example 1: Below is the example that illustrates the use of Abide Required Radio & Checkbox.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Foundation CSS Abide Required Radio & Checkbox</title>
    
  <link rel="stylesheet"
        href=
        crossorigin="anonymous">
  <script src=
          crossorigin="anonymous">
  </script>
  <link rel="stylesheet" 
        href=
  <script src=
  </script>
  <script src=
          crossorigin="anonymous">
  </script>
</head>
  
<body style="margin-inline: 30rem;">
  
  <center>
    <h1 style="color:green;">
      GeeksforGeeks
    </h1>
  
    <h5>Foundation CSS Abide Required Radio & Checkbox</h5>
  
    <form data-abide novalidate>
        <fieldset>
          <input type="radio"
                 name="gfg"
                 id="gfg-1"
                 value="DSA"
                 required>
          <label for="gfg-1">DSA</label>
  
          <input type="radio" 
                 name="gfg" 
                 id="gfg-2"
                 value="OOP's">
          <label for="gfg-2">OOP's</label>
            
          <input type="radio"
                 name="gfg"
                 id="gfg-3"
                 value=DBMSC>
          <label for="gfg-3">DBMS</label>
        </fieldset>
  
        <button class="button" type="submit">SUBMIT</button>
            
        <button class="button" type="reset">RESET</button>
    </form>
  </center>
  
  <script>
    $(document).ready(function () {
      $(document).foundation();
    })
  </script>
</body>
  
</html>


Output:

Foundation CSS Abide Required Radio & Checkbox

Foundation CSS Abide Required Radio & Checkbox

Example 2: Below is another example that illustrates the use of Abide Required Radio & Checkbox.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Foundation CSS Abide Required Radio and Checkbox</title>
  <link rel="stylesheet"
        href=
        crossorigin="anonymous">
  
  <script src=
          crossorigin="anonymous">
  </script>
  <link rel="stylesheet" 
        href=
  <script src=
  </script>
  <script src=
          crossorigin="anonymous">
  </script>
</head>
  
  
<body style="margin-inline: 30rem;">
  <center>
    <h1 style="color:green;">
      GeeksforGeeks
    </h1>
  
    <h5>Foundation CSS Abide Required Radio and Checkbox</h5>
  
    <form data-abide novalidate>
        <fieldset> Select your subject! 
          <input data-min-required="2"
                 type="checkbox" 
                 name="gfg" id="DSA" 
                 value="DSA">
          <label for="DSA">DSA</label>
  
          <input required type="checkbox" 
                 name="gfg" id="DBMS" 
                 value="DBMS">
          <label for="DBMS">DBMS</label>
  
          <input type="checkbox" name="gfg" 
                 id="OOP's" value="OOP's">
          <label for="OOP's">OOP's</label>
        </fieldset>
        
        <button class="button" type="submit">SUBMIT</button>
            
        <button class="button" type="reset">RESET</button>
    </form>
  </center>
  
  <script>
    $(document).ready(function () {
      $(document).foundation();
    })
  </script>
</body>
  
</html>


Output:

Foundation CSS Abide Required Radio & Checkbox

Foundation CSS Abide Required Radio & Checkbox

Reference: https://get.foundation/sites/docs/abide.html#required-radio-checkbox



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