freeCodeCamp/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-buildin.../60f83e7bfc09900959f41e20.md

2.0 KiB

id title challengeType dashedName
60f83e7bfc09900959f41e20 Step 22 0 step-22

--description--

Alcuni valori dell'attributo type sono dotati di validazione integrata del modulo. Ad esempio, type="email" richiede che il valore sia un indirizzo email valido.

Aggiungi una validazione personalizzata all'elemento input della password aggiungendo un attributo minlength con un valore di 8. In questo modo si evita che vengano inviati input inferiori a 8 caratteri.

--hints--

Dovresti assegnare all'elemento input della password un attributo minlength.

assert.notEqual(document.querySelector('input[type="password"]')?.minLength, -1);

Dovresti assegnare all'attributo minlength il valore 8.

assert.equal(document.querySelector('input[type="password"]')?.minLength, 8);

--seed--

--seed-contents--

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
--fcc-editable-region--
      <fieldset>
        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" type="password" required /></label>
      </fieldset>
--fcc-editable-region--
      <fieldset></fieldset>
      <fieldset></fieldset>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
}

label {
  display: block;
  margin: 0.5rem 0;
}