Advertisement
fcamuso

Bootstrap - lezione 8

Jul 21st, 2023
1,066
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.81 KB | None | 0 0
  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <title>Title</title>
  6.   <!-- Required meta tags -->
  7.   <meta charset="utf-8">
  8.   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  9.  
  10.   <!-- Bootstrap CSS v5.3.0 -->
  11.   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
  12.        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  13.        crossorigin="anonymous">
  14. </head>
  15.  
  16. <body>
  17.  
  18.   <form class="p-3">
  19.     <fieldset class="form-control-lg">
  20.       <div class="row mb-3">
  21.         <div class="col-1">
  22.           <label for="cognome" class="form-label">LARGE</label>
  23.         </div>
  24.         <div class="col-auto">
  25.           <input type="text" class="form-control" id="cognome">
  26.         </div>
  27.       </div>
  28.    </fieldset>
  29.  
  30.     <fieldset disabled>
  31.       <div class="row mb-3">
  32.         <div class="col-1">
  33.           <label for="nome" class="form-label">Normal</label>
  34.         </div>
  35.         <div class="col-auto">
  36.           <input type="text" class="form-control" id="nome" value="test prova">
  37.         </div>
  38.       </div>
  39.     </fieldset>
  40.    
  41.     <fieldset class="form-control-sm">
  42.       <div class="row mb-3">
  43.         <div class="col-1">
  44.           <label for="cognome_copia" class="form-label">small</label>
  45.         </div>
  46.         <div class="col-auto">
  47.           <input type="text" class="form-control" readonly  value="standard" id="cognome_copia">
  48.         </div>
  49.       </div>
  50.    </fieldset>
  51.  
  52.    <div class="row mb-3">
  53.     <div class="col-auto">
  54.       <select id="provincia" class="form-select form-select-sm">
  55.         <option selected>Scegli una provincia</option>
  56.         <option value="MI">Milano</option>
  57.         <option value="RM">Roma</option>
  58.         <option value="PA">Palermo</option>
  59.       </select>
  60.     </div>
  61.   </div>  
  62.  <br><br><br>
  63.   <div class="form-check">
  64.     <label class="form-check-label" for="check1">C++</label>
  65.     <input class="form-check-input" name="linguaggio" type="checkbox" id="check1">
  66.   </div>
  67.   <div class="form-check">
  68.     <label class="form-check-label" for="check2">Javascript</label>
  69.     <input class="form-check-input" name="linguaggio" type="checkbox" id="check2">
  70.   </div>
  71.   <div class="form-check form-switch">
  72.     <label class="form-check-label" for="check3">Precedenti Esperienze</label>
  73.     <input class="form-check-input"  name="esperienze" type="checkbox" id="check3">
  74.   </div>
  75.  
  76.   <br><br>
  77.   <div class="form-check">
  78.     <label class="form-check-label" for="radio1">M</label>
  79.     <input class="form-check-input" name="sesso" type="radio" id="radio1">
  80.   </div>
  81.   <div class="form-check">
  82.     <label class="form-check-label" for="radio2">F</label>
  83.     <input class="form-check-input" name="sesso" type="radio" id="radio2">
  84.   </div>
  85.  
  86.  
  87.   <br><br>
  88.   <div class="form-check form-check-inline">
  89.     <label class="form-check-label" for="radio3">M</label>
  90.     <input class="form-check-input" name="sesso" type="radio" id="radio3">
  91.   </div>
  92.   <div class="form-check form-check-inline">
  93.     <label class="form-check-label" for="radio4">F</label>
  94.     <input class="form-check-input" name="sesso" type="radio" id="radio4">
  95.   </div>  
  96.  
  97.   <br><br>
  98.   <div class="form-check form-check-reverse">
  99.     <label class="form-check-label" for="radio5">M</label>
  100.     <input class="form-check-input" name="sesso" type="radio" id="radio5">
  101.   </div>
  102.   <div class="form-check form-check-reverse">
  103.     <label class="form-check-label" for="radio6">F</label>
  104.     <input class="form-check-input" name="sesso" type="radio" id="radio6">
  105.   </div>  
  106.  
  107.   <div class="form-floating mb-3">
  108.     <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  109.     <label for="floatingInput">Email</label>
  110.   </div>
  111.   <div class="form-floating">
  112.     <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  113.     <label for="floatingPassword">Password</label>
  114.   </div>
  115.   <br><br>
  116.  
  117.   <div class="input-group mb-3">
  118.     <span class="input-group-text">@</span>
  119.     <input id="user" type="text" class="form-control" placeholder="Username"">
  120.   </div>
  121.  
  122.   <div class="input-group mb-3">
  123.     <span class="input-group-text">$</span>
  124.     <input id="dollaro" type="text" class="form-control">
  125.     <span class="input-group-text">.00</span>
  126.   </div>
  127.  
  128.   <br><br>
  129.   <label for="intervallo" class="form-label">Voto</label>
  130.   <input type="range" class="form-range" min="1" max="10" step="0.5" id="intervallo">
  131. </form>
  132. <br><br>
  133.  
  134. <div class="container">
  135. <form class="row" id="con_validazione" novalidate action="elabora.php">
  136.   <div class="col-md-4">
  137.     <label for="il_nome" class="form-label">Nome</label>
  138.     <input type="text" class="form-control" id="il_nome" value="Sandro">
  139.     <div class="valid-feedback">
  140.       OK!
  141.     </div>
  142.     <div class="invalid-feedback">
  143.       Errore!
  144.     </div>
  145.  
  146.   </div>
  147.   <div class="col-md-4">
  148.     <label for="il_cognome" class="form-label">Cognome</label>
  149.     <input type="text" class="form-control" id="il_cognome" value="Parchielli" required>
  150.     <div class="valid-feedback">
  151.       OK!
  152.     </div>
  153.   </div>
  154.   <div class="col-md-4">
  155.     <label for="username" class="form-label">Username</label>
  156.     <div class="input-group has-validation">
  157.       <span class="input-group-text" id="inputGroupPrepend">@</span>
  158.       <input type="text" class="form-control" id="username" required>
  159.       <div class="invalid-feedback">
  160.         Scegliere uno username.
  161.       </div>
  162.     </div>
  163.   </div>
  164.   <div class="col-md-6">
  165.     <label for="citta" class="form-label">Cittร </label>
  166.     <input type="text" class="form-control" id="citta" required>
  167.     <div class="invalid-feedback">
  168.       Scegliere una cittรก valida
  169.     </div>
  170.   </div>
  171.   <div class="col-md-3">
  172.     <label for="nazione" class="form-label">Nazione</label>
  173.     <select class="form-select" id="nazione" required>
  174.       <option selected disabled value="">Scegli...</option>
  175.       <option>...</option>
  176.     </select>
  177.     <div class="invalid-feedback">
  178.       Scegli una nazione valida.
  179.     </div>
  180.   </div>
  181.   <div class="col-md-3">
  182.     <label for="zip" class="form-label">Zip</label>
  183.     <input type="text" class="form-control" id="zip" required>
  184.     <div class="invalid-feedback">
  185.       Scegli uno zip valido.
  186.     </div>
  187.   </div>
  188.   <div class="col-12">
  189.     <div class="form-check">
  190.       <input class="form-check-input" type="checkbox" value="" id="accettazione" required>
  191.       <label class="form-check-label" for="accettazione">
  192.         Accetto le condizioni
  193.       </label>
  194.       <div class="invalid-feedback">
  195.         Devi accettare per proseguire
  196.       </div>
  197.     </div>
  198.   </div>
  199.   <div class="col-12">
  200.     <button class="btn btn-primary" type="submit">INVIA</button>
  201.   </div>
  202. </form>
  203. </div>
  204.  
  205.  
  206.   <!-- Bootstrap JavaScript Libraries -->
  207.   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
  208.          integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
  209.          crossorigin="anonymous"></script>
  210.  
  211.   <script>
  212.     document.getElementById("con_validazione")
  213.      .addEventListener("submit", function(event) {
  214.      
  215.       //ERRATA CORRIGE RISPETTO AL VIDEO
  216.       //resetto lo stato della casella nome per
  217.       //rifare il check sul submit
  218.       const nome = document.getElementById("il_nome");
  219.       nome.classList.remove("is-valid"); nome.classList.remove("is-invalid");
  220.       // *************************************************************
  221.        
  222.       //ERRATA CORRIGE RISPETTO AL VIDEO: aggiungo il controllo customizzato sul nome
  223.       if (!(check_nome(nome) && this.checkValidity() )) {
  224.          event.preventDefault();
  225.           event.stopPropagation();
  226.  
  227.           //ribadisco lo stato dei feedback sul nome causa interferenze con checkValidity
  228.           //diversamente ci sono situazioni in cui rimangono visualizzati sia
  229.           //il messaggio di dato valido sia quello di dato non valido
  230.           check_nome();
  231.         }
  232.    
  233.         this.classList.add('was-validated');
  234.  
  235.       });
  236.  
  237.      
  238.      //ERRATA CORRIGE RISPETTO AL VIDEO: ho creato
  239.      //una funzione di check isolata per poterla
  240.      //richiamare anche al submit (vedi sopra)
  241.       document.getElementById("il_nome")
  242.        .addEventListener("blur", function() {      
  243.         check_nome(this);
  244.      });
  245.  
  246.      
  247.      //questa funzione nel video era in linea nell'addEventListener
  248.      function check_nome(nome)
  249.      {
  250.       //pulisco la classList
  251.       nome.classList.remove("is-valid"); nome.classList.remove("is-invalid");
  252.  
  253.       if(nome.value.length<3)
  254.      {        
  255.        nome.classList.add("is-invalid");
  256.        return false;
  257.      }
  258.      else
  259.      {
  260.        nome.classList.add("is-valid");
  261.        return true;
  262.      }
  263.     }
  264.  
  265.  </script>
  266.  
  267. </body>
  268.  
  269. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement