Skip to content

Commit

Permalink
fix: form validations
Browse files Browse the repository at this point in the history 
Co-authored-by: Andrea Stagi <[email protected]>
  • Loading branch information
@PiemP @astagi
PiemP and astagi authored Dec 5, 2023
1 parent 41b26d7 commit 5fcab94
Show file tree
Hide file tree
Showing 8 changed files with 368 additions and 281 deletions.
274 changes: 155 additions & 119 deletions docs/esempi/form/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ <h2>Campi input</h2>
<div class="col-12 col-md-4">
<div class="select-wrapper">
<label for="defaultSelect">Select</label>
<select id="defaultSelect" title="Scegli una opzione" required>
<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>
Expand All @@ -59,7 +59,7 @@ <h2>Campi input</h2>
<div class="col-12 col-md-4">
<div class="form-group">
<label class="active" for="date">Datepicker</label>
<input type="date" id="date" name="date" required />
<input class="form-control" type="date" id="date" name="date" required />
</div>
</div>
</div>
Expand All @@ -70,13 +70,30 @@ <h2>Campi input</h2>
<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>

<div class="row">
<div class="col-12">
<div class="form-group">
<label for="description">Testo descrizione</label>
<textarea id="description" rows="3"></textarea>
<textarea class="form-control" id="description" rows="3"></textarea>
</div>
</div>
</div>
Expand All @@ -89,121 +106,123 @@ <h2>Autocomplete</h2>

<div class="row mb-4">
<div class="col-12 col-md-4">
<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 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>
Expand Down Expand Up @@ -275,7 +294,7 @@ <h2>File</h2>
<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" required />
<input type="file" name="upload" id="upload" multiple="multiple" class="form-control" required />
</div>
</div>
<div class="col-12 col-md-6">
Expand Down Expand Up @@ -344,6 +363,23 @@ <h2>File</h2>
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('#age', [
{
Expand Down
Loading

0 comments on commit 5fcab94

Please sign in to comment.