---
layout: base
title: Validazione Form
---

<form id="justValidate" action="index.html" method="post">
  <div class="container mb-5 mt-5 pt-5">
    <div class="row">
      <div class="col-12">
        <h1>Form con validazione</h1>
        <hr />
      </div>
    </div>
    <div class="row mt-5 mb-4">
      <div class="col-12">
        <h2>Campi input</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-4">
        <div class="form-group">
          <label for="nome">Campo testo</label>
          <input type="text" class="form-control" id="nome" required />
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="form-group">
          <label for="age">Campo numerico (min/max)</label>
          <input type="number" data-bs-input class="form-control" id="age" min="18" max="50" step="1" required />
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="form-group">
          <label for="camponumerico">Campo numerico (5 cifre)</label>
          <input type="number" data-bs-input class="form-control" id="camponumerico" maxlenght="5" required />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-4">
        <div class="form-group">
          <label for="email">Campo Email</label>
          <input type="email" class="form-control" id="email" required />
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="form-group">
          <div class="select-wrapper">
            <label for="defaultSelect">Select</label>
            <select id="defaultSelect" title="Scegli una opzione" class="form-control" required>
              <option selected value="">Scegli una opzione</option>
              <option value="Value 1">Opzione 1</option>
              <option value="Value 2">Opzione 2</option>
              <option value="Value 3">Opzione 3</option>
              <option value="Value 4">Opzione 4</option>
              <option value="Value 5">Opzione 5</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="form-group">
          <label class="active" for="date">Datepicker</label>
          <input class="form-control" type="date" id="date" name="date" required />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-4">
        <div class="form-group">
          <label class="active" for="time">Timepicker</label>
          <input class="form-control" id="time" type="time" required />
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="form-group">
          <label for="importo_input_group" class="form-label active">Importo</label>
          <span class="input-group input-number input-number-currency">
            <span class="input-group-text fw-semibold">€</span>
            <input type="number" class="form-control" data-bs-input id="importo_input_group" name="importo" step="any" value="3.50" min="0" max="50" required />
            <span class="input-group-text align-buttons flex-column">
              <button class="input-number-add">
                <span class="visually-hidden">Aumenta valore Euro</span>
              </button>
              <button class="input-number-sub">
                <span class="visually-hidden">Diminuisci valore Euro</span>
              </button>
            </span>
          </span>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="form-group">
          <label for="perc_input_group" class="input-number-label active">Percentuale</label>
          <div class="input-group input-number input-number-percentage">
            <span class="input-group-text fw-semibold">%</span>
            <input type="number" class="form-control" data-bs-input id="perc_input_group" name="perc_input_group" value="80" min="80" max="100" step="any" />
            <span class="input-group-text align-buttons flex-column">
              <button class="input-number-add">
                <span class="visually-hidden">Aumenta del 10%</span>
              </button>
              <button class="input-number-sub">
                <span class="visually-hidden">Diminuisci del 10%</span>
              </button>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-text"><svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-pencil"></use></svg></span>
            <label class="active" for="etichetta_input_group">Con Etichetta e placeholder</label>
            <input type="text" class="form-control" id="etichetta_input_group" name="etichetta_input_group" placeholder="Lorem Ipsum">
          </div>
        </div>
      </div>
    </div>

    <div class="row mb-4">
      <div class="col-12">
        <h2>Autocomplete</h2>
      </div>
    </div>

    <div class="row mb-4">
      <div class="col-12 col-md-4">
        <div class="form-group">
          <div class="select-wrapper">
            <label for="accessibleAutocomplete">Autocomplete</label>
            <select class="form-control" id="accessibleAutocomplete" title="Scegli una provincia" required>
              <option selected value="">Scegli una opzione</option>
              <option value="AG">Agrigento</option>
              <option value="AL">Alessandria</option>
              <option value="AN">Ancona</option>
              <option value="AO">Aosta</option>
              <option value="AR">Arezzo</option>
              <option value="AP">Ascoli Piceno</option>
              <option value="AT">Asti</option>
              <option value="AV">Avellino</option>
              <option value="BA">Bari</option>
              <option value="BT">Barletta-Andria-Trani</option>
              <option value="BL">Belluno</option>
              <option value="BN">Benevento</option>
              <option value="BG">Bergamo</option>
              <option value="BI">Biella</option>
              <option value="BO">Bologna</option>
              <option value="BZ">Bolzano</option>
              <option value="BS">Brescia</option>
              <option value="BR">Brindisi</option>
              <option value="CA">Cagliari</option>
              <option value="CL">Caltanissetta</option>
              <option value="CB">Campobasso</option>
              <option value="CI">Carbonia-Iglesias</option>
              <option value="CE">Caserta</option>
              <option value="CT">Catania</option>
              <option value="CZ">Catanzaro</option>
              <option value="CH">Chieti</option>
              <option value="CO">Como</option>
              <option value="CS">Cosenza</option>
              <option value="CR">Cremona</option>
              <option value="KR">Crotone</option>
              <option value="CN">Cuneo</option>
              <option value="EN">Enna</option>
              <option value="FM">Fermo</option>
              <option value="FE">Ferrara</option>
              <option value="FI">Firenze</option>
              <option value="FG">Foggia</option>
              <option value="FC">Forlì-Cesena</option>
              <option value="FR">Frosinone</option>
              <option value="GE">Genova</option>
              <option value="GO">Gorizia</option>
              <option value="GR">Grosseto</option>
              <option value="IM">Imperia</option>
              <option value="IS">Isernia</option>
              <option value="SP">La Spezia</option>
              <option value="AQ">L\'Aquila</option>
              <option value="LT">Latina</option>
              <option value="LE">Lecce</option>
              <option value="LC">Lecco</option>
              <option value="LI">Livorno</option>
              <option value="LO">Lodi</option>
              <option value="LU">Lucca</option>
              <option value="MC">Macerata</option>
              <option value="MN">Mantova</option>
              <option value="MS">Massa-Carrara</option>
              <option value="MT">Matera</option>
              <option value="ME">Messina</option>
              <option value="MI">Milano</option>
              <option value="MO">Modena</option>
              <option value="MB">Monza e della Brianza</option>
              <option value="NA">Napoli</option>
              <option value="NO">Novara</option>
              <option value="NU">Nuoro</option>
              <option value="OT">Olbia-Tempio</option>
              <option value="OR">Oristano</option>
              <option value="PD">Padova</option>
              <option value="PA">Palermo</option>
              <option value="PR">Parma</option>
              <option value="PV">Pavia</option>
              <option value="PG">Perugia</option>
              <option value="PU">Pesaro e Urbino</option>
              <option value="PE">Pescara</option>
              <option value="PC">Piacenza</option>
              <option value="PI">Pisa</option>
              <option value="PT">Pistoia</option>
              <option value="PN">Pordenone</option>
              <option value="PZ">Potenza</option>
              <option value="PO">Prato</option>
              <option value="RG">Ragusa</option>
              <option value="RA">Ravenna</option>
              <option value="RC">Reggio Calabria</option>
              <option value="RE">Reggio Emilia</option>
              <option value="RI">Rieti</option>
              <option value="RN">Rimini</option>
              <option value="RM">Roma</option>
              <option value="RO">Rovigo</option>
              <option value="SA">Salerno</option>
              <option value="VS">Medio Campidano</option>
              <option value="SS">Sassari</option>
              <option value="SV">Savona</option>
              <option value="SI">Siena</option>
              <option value="SR">Siracusa</option>
              <option value="SO">Sondrio</option>
              <option value="TA">Taranto</option>
              <option value="TE">Teramo</option>
              <option value="TR">Terni</option>
              <option value="TO">Torino</option>
              <option value="OG">Ogliastra</option>
              <option value="TP">Trapani</option>
              <option value="TN">Trento</option>
              <option value="TV">Treviso</option>
              <option value="TS">Trieste</option>
              <option value="UD">Udine</option>
              <option value="VA">Varese</option>
              <option value="VE">Venezia</option>
              <option value="VB">Verbano-Cusio-Ossola</option>
              <option value="VC">Vercelli</option>
              <option value="VR">Verona</option>
              <option value="VV">Vibo Valentia</option>
              <option value="VI">Vicenza</option>
              <option value="VT">Viterbo</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="row mb-4">
      <div class="col-12">
        <h2>Checkbox / Radio</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-12 col-md-4">
        <div class="row">
          <div class="form-check mb-5">
            <input id="checkbox1" type="checkbox" required />
            <label for="checkbox1">Checkbox isolata</label>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="toggles">
          <label for="toggleEsempio1a">
            Toggle isolato
            <input type="checkbox" id="toggleEsempio1a" required />
            <span class="lever"></span>
          </label>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-4">
        <fieldset id="radiogroup">
          <legend>Fieldset radio buttons</legend>
          <div class="form-check form-check-inline">
            <input name="gruppo2" type="radio" id="radio1" required />
            <label for="radio1">Radio 1</label>
          </div>
          <div class="form-check form-check-inline">
            <input name="gruppo2" type="radio" id="radio2" required />
            <label for="radio2">Radio 2</label>
          </div>
        </fieldset>
      </div>
      <div class="col-12 col-md-4">
        <fieldset id="checkgroup">
          <legend>Fieldset checkbox</legend>
          <div class="form-check form-check-inline">
            <input id="checkbox2" type="checkbox" required />
            <label for="checkbox2">Checkbox 1</label>
          </div>
          <div class="form-check form-check-inline">
            <input id="checkbox3" type="checkbox" required />
            <label for="checkbox3">Checkbox 2</label>
          </div>
        </fieldset>
      </div>
    </div>

    <div class="row mb-4">
      <div class="col-12">
        <h2>File</h2>
      </div>
    </div>

    <div class="row mb-5">
      <div class="col-12 col-md-6">
        <div class="form-upload">
          <label for="upload">Upload</label>
          <input type="file" name="upload" id="upload" multiple="multiple" class="form-control" required />
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="form-upload">
          <input type="file" name="upload1" id="upload1" class="upload" multiple="multiple" required />
          <label for="upload1">
            <svg class="icon icon-sm" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-upload"></use></svg>
            <span>Upload custom (solo jpg/png)</span>
          </label>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <button class="btn btn-primary mt-3" type="submit">Invia form</button>
      </div>
    </div>
  </div>
</form>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div aria-live="polite" id="errorMsgContainer"></div>
    </div>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const errorMessage =
      '<div class="alert alert-danger alert-dismissible fade show" role="alert"><strong>Attenzione</strong> Alcuni campi inseriti sono da controllare.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Chiudi avviso"></div>'
    const errorWrapper = document.querySelector('#errorMsgContainer')
    const validate = new bootstrap.FormValidate('#justValidate', {
      errorFieldCssClass: 'is-invalid',
      errorLabelCssClass: 'form-feedback',
      errorLabelStyle: '',
      focusInvalidField: false,
    })

    const selectAutocomplete = new bootstrap.SelectAutocomplete(document.querySelector('#accessibleAutocomplete'), {
      showAllValues: true,
      defaultValue: '',
      autoselect: false,
      showNoOptionsFound: false,
      dropdownArrow: () => '',
      onConfirm: () => {},
    })
    /*accessibleAutocomplete.enhanceSelectElement({
      selectElement: document.querySelector('#accessibleAutocomplete'),
      showAllValues: true,
      defaultValue: '',
      autoselect: false,
      showNoOptionsFound: false,
      dropdownArrow: () => '',
      onConfirm: () => {},
    })*/

    validate
      .addField('#nome', [
        {
          rule: 'required',
          errorMessage: 'Questo campo è richiesto',
        },
      ])
      .addField('#accessibleAutocomplete', [
        {
          rule: 'required',
          errorMessage: 'Questo campo è richiesto',
        },
        {
          validator: (value) => {
            return ['Alessandria', 'Bergamo', 'Piacenza'].includes(value);
          },
          errorMessage: 'Puoi scegliere solo tra Alessandria, Piacenza o Bergamo',
        },
      ])
      .addField('#importo_input_group', [
        {
          rule: 'required',
          errorMessage: 'Questo campo è richiesto',
        },
        {
          rule: 'minNumber',
          value: 3.50,
          errorMessage: 'Deve essere maggiore di 3.50',
        }
      ])
      .addField('#perc_input_group', [
        {
          rule: 'required',
          errorMessage: 'Questo campo è richiesto',
        },
        {
          rule: 'minNumber',
          value: 80,
          errorMessage: 'Deve essere maggiore di 80',
        }
      ])
      .addField('#etichetta_input_group', [
        {
          rule: 'required',
          errorMessage: 'Questo campo è richiesto',
        },
        {
          rule: 'minNumber',
          value: 80,
          errorMessage: 'Deve essere maggiore di 80',
        }
      ])
      .addField('#age', [
        {
          rule: 'required',
          errorMessage: 'Questo campo è richiesto',
        },
        {
          rule: 'minNumber',
          value: 18,
          errorMessage: 'Deve essere maggiore di 17',
        },
        {
          rule: 'maxNumber',
          value: 50,
          errorMessage: 'Deve essere minore di 51',
        },
      ])
      .addField('#camponumerico', [
        {
          rule: 'required',
          errorMessage: 'Questo campo è richiesto',
        },
        {
          rule: 'minLength',
          value: 5,
          errorMessage: 'Inserire 5 cifre',
        },
        {
          rule: 'maxLength',
          value: 5,
          errorMessage: 'Inserire 5 cifre',
        },
      ])
      .addField('#email', [
        {
          rule: 'required',
          errorMessage: 'Questo campo è richiesto',
        },
        {
          rule: 'email',
          errorMessage: 'Inserire email corretta',
        },
      ])
      .addField('#defaultSelect', [
        {
          rule: 'required',
          errorMessage: 'Questo campo è richiesto',
        },
      ])

      .addRequiredGroup('#radiogroup', 'Scegli un’opzione')
      .addRequiredGroup('#checkgroup', 'Scegli almeno un’opzione')
      .addField('#date', [
        {
          rule: 'required',
          errorMessage: 'Questo campo è richiesto',
        },
      ])
      .addField('#time', [
        {
          rule: 'required',
          errorMessage: 'Questo campo è richiesto',
        },
      ])
      .addField('#toggleEsempio1a', [
        {
          rule: 'required',
          errorMessage: 'Questo campo è richiesto',
        },
      ])
      .addField('#checkbox1', [
        {
          rule: 'required',
          errorMessage: 'Questo campo è richiesto',
        },
      ])
      .addField('#upload1', [
        {
          rule: 'minFilesCount',
          value: 1,
          errorMessage: 'Caricare un file jpg o png',
        },
        {
          rule: 'files',
          value: {
            files: {
              extensions: ['jpg', 'png'],
              maxSize: 100000,
              minSize: 50,
              types: ['image/jpeg', 'image/png'],
            },
          },
          errorMessage: 'Tipo di file sbagliato o troppo pesante',
        },
      ])
      .addField('#upload', [
        {
          rule: 'minFilesCount',
          value: 1,
          errorMessage: 'Caricare un file',
        },
      ])
      .onSuccess((event) => {
        document.forms['justValidate'].submit()
      })
      .onFail((fields) => {
        errorWrapper.innerHTML = ''
        errorWrapper.innerHTML = errorMessage
        errorWrapper.scrollIntoView()
      })
  })
</script>