Foundation - Démo Plugins Abide

La description

Abide est utilisé dans la bibliothèque de validation de formulaire HTML5 avec une API native utilisant les attributs et modèles requis.

Exemple

L'exemple suivant montre l'utilisation du plugin abide dans Foundation -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h2>Example of Abide</h2>
      <form data-abide novalidate>
         <div data-abide-error class = "alert callout" style = "display: none;">
            <p><i class = "fi-alert"></i> There are some errors in your form.</p>
         </div>

         <div class = "row">
            <div class = "small-12 columns">
               <label>Name
                  <input type = "text" placeholder = "Name" required pattern = "[a-zA-Z]+">
                  <span class = "form-error">Fill the Correct box</span>
               </label>

               <label>Email
                  <input type = "text" placeholder = "[email protected]" pattern = "email">
               </label>
            </div>
         </div>

         <div class = "row">
            <div class = "medium-4 columns">
               <fieldset>
                  <label>Gender</label>

                  <input type = "radio" name = "pockets" value = "Male">
                  <label>Male</label>

                  <input type = "radio" name = "pockets" value = "Female">
                  <label>Female</label>

                  <input type = "radio" name = "pockets" value = "Other">
                  <label>Other</label>
               </fieldset>

               <label>Input Label
                  <select id = "select" required>
                     <option value = ""></option>
                     <option value = "volvo">Volvo</option>
                     <option value = "saab">Saab</option>
                     <option value = "mercedes">Mercedes</option>
                     <option value = "audi">Audi</option>
                  </select>
               </label>
            </div>
         </div>

         <div class = "row">
            <fieldset class = "large-6 columns">
               <button class = "button" type = "submit" value = "Submit">Submit</button>
               <button class = "button" type = "reset" value = "Reset">Reset</button>
            </fieldset>
         </div>
      </form>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Details of the code are as follows -

  • Le code suivant est écrit initialement pour créer le formulaire. <form data-abide novalidate> est l'élément écrit initialement.

<form data-abide novalidate>
   <div data-abide-error class = "alert callout" style = "display: none;">
     <p><i class = "fi-alert"></i> There are some errors in your form.</p>
   </div>

   <div class = "row">
      <div class = "small-12 columns">
         <label>Name
            <input type = "text" placeholder = "Name" required pattern = "[a-zA-Z]+">
            <span class = "form-error">Fill the Correct box</span>
         </label>
      </div>
   </div>
</form>

  • Dans le formulaire, nous avons inclus l'état d'erreur à afficher pour des champs particuliers lors du remplissage du formulaire. L' élément data-abide-error class = "alert callout" donne l'état d'erreur pour le formulaire complet.

  • La classe d' erreur de formulaire affiche l'erreur pour le champ particulier lorsque l'entrée saisie est incorrecte.

<form data-abide novalidate>
   <div data-abide-error class = "alert callout" style = "display: none;">
       <p><i class = "fi-alert"></i> There are some errors in your form.</p>
   </div>

   <div class = "row">
      <div class = "small-12 columns">
         <label>Name
            <input type = "text" placeholder = "Name" required pattern = "[a-zA-Z]+">
            <span class = "form-error">Fill the Correct box</span>
         </label>
      </div>
   </div>
</form>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code html ci-dessus abide_demo.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.