Formulari

Entrada i sortida d’informació amb formularis: Visita la web: https://www.w3schools.com/js/js_validation.asp Crea un exemple al teu sandbox on hi hagi diferents camps de dades (i de diferents tipus: textbox, radiobutton, checkbox...) Fes una validació programàtica de dades que ens digui si les dades son correctes o no Quan les dades siguin correctes, obre una finestra de confirmació que digui “Les dades que has introduït son xxxxxxx, vols continuar?” [Opcionalment]: Aplica disseny al formulari amb bootstrap, material design lite o similar. Afegeix al següent espai el codi que has creat al teu sandbox o repositori i l’enllaç a l’exemple. A més a més d’incloure una captura de pantalla amb el disseny del formulari

by merygarriga

HTML

<html>

  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </head>

  <body style="background-color: slategray;">
    <h1>FORMULARI</h1>

    <div class="card mt-2 ms-2" style="width: 40em;">
      <div class="card-header">
        <img src='https://cdn-icons-png.flaticon.com/512/88/88450.png' alt='form' height="30px" width="30px">
        INTRODUEIX LES DADES
      </div>
      <form name="pokemonForm" action='#' onsubmit="return validateForm()">
        <div class="mb-3 row">
          <div class="mb-3 row">
            <label class="col-sm-2 col-form-label" for="num">Número: </label>
            <div class="col-sm-10">
              <input class="form-control" type="text" id="num" name="num" placeholder="Número de usuario" maxlength="3" autofocus>
            </div>
          </div>
          <div class="mb-3 row">
            <label class="col-sm-2 col-form-label" for="num">Nombre: </label>
            <div class="col-sm-10">
              <input class="form-control" type="text" id="name" name="name" placeholder="Nombre">
            </div>
          </div>

          <div class="mb-3 row">
            <label class="col-sm-2 col-form-label" for="region">Región: </label>
            <div class="col-sm-10">
              <select class="form-select" id="region" name="region">
                <option></option>
                <option value="castillaLeon">Castilla y León</option>
                <option value="andalucia">Andalucía</option>
                <option value="aragon">Aragón</option>
                <option value="extramadura">Extremadura</option>
                <option...

CSS

* {
    box-sizing: border-box;
}

form {
    font-family: 'Courier New', Courier, monospace;
    background-color: ghostwhite;
}

h1 {
    font-size: 3em;
    color: #DED1A9;
}

label {
  font-family: Arial, Helvetica, sans-serif;
  color: #B0B8BF;
}

.btn {
  background-color: #DEBAA9;
  border-radius: 12px;
  border: 1px solid #000000;
  color: #AD7960;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.btn:hover {
  background-color: #AD7960;
  color: #7D3F21;
}

JavaScript

function validateForm() {
  let num = document.forms["pokemonForm"]["num"].value;
  if (num === "") {
    alert("Num must be filled out");
    return false;
  }

  let name = document.forms["pokemonForm"]["name"].value;
  if (name === "") {
    alert("Name must be filled out");
    return false;
  }

  let region = document.forms["pokemonForm"]["region"].value;
  if (region === "") {
    alert("Region must be filled out");
    return false;
  }
  
  let date = document.forms["pokemonForm"]["date"].value;
  if(date === "")
    {
    	alert("Date must be filled out")
    	return false;
    }

let shift = document.forms["pokemonForm"]["shift"].value;
  if(!document.querySelector('input[name="shift"]:checked')) {
    alert("Shift must be filled out");
    return false;
  }

  alert("Muchas gracias por enviar el formulario!\n" +
    "Número: " + num + "\n" +
    "Nombre: " + name + "\n" +
    "Region: " + region + "\n" +
    "Fecha: " + date + "\n" +
    "Turno: " + shift + ", vols continuar?");
  console.log("Número: " + num + "\n" +
    "Nombre: " + name + "\n" +
    "Region: " + region + "\n" +
    "Fecha: " + date + "\n" +
    "Turno: " + shift + ", vols continuar?");
 
document.pokemonForm.submit(document.write("<h2 style='color:white;'>FORMULARI ENVIAT</h2>"));
}