Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Validation - input type number graphical fix #1013

Merged
merged 28 commits into from
Dec 5, 2023
Merged

Validation - input type number graphical fix #1013

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
6f02d27
fix: added type=number to not repeat background
PiemP Nov 21, 2023
bae3222
fix: currency and percentage with form-control
PiemP Nov 21, 2023
c80b614
chore(docs): add currency field to form example
astagi Nov 22, 2023
e0130d5
fix: removed validation css extra code
PiemP Nov 22, 2023
a5c5219
docs: added form-control to textarea
PiemP Nov 22, 2023
dda312c
fix: prettier error
PiemP Nov 22, 2023
f1e2db3
fix: textarea border bottom
PiemP Nov 22, 2023
cf52bdd
fix: currency field with input-group
PiemP Nov 23, 2023
004eb22
fix: keep form-control class on autocomplete input
astagi Nov 27, 2023
f464856
fix: removed css code for autocomplete val
PiemP Nov 27, 2023
b6a61c4
fix: input number label when value is null
astagi Nov 27, 2023
779f1b2
fix: add form-feedback to autocomplete
astagi Nov 27, 2023
754d21e
fix: add form-control to files
astagi Nov 27, 2023
c7eaf85
fix: trigger input on number change with buttons
astagi Nov 27, 2023
6543b69
fix: border color input currency
PiemP Nov 27, 2023
502ea64
fix: success border color in currency
PiemP Nov 27, 2023
832c141
fix: remove currency label when input is empty
astagi Nov 27, 2023
eacd636
fix: same border color when focus currency
PiemP Nov 27, 2023
fda7ac0
chore: linting
astagi Nov 27, 2023
af80e18
fix: moved button to align it with icons
PiemP Nov 27, 2023
7ecec60
docs: removed d-flex class
PiemP Nov 27, 2023
48006bc
fix: disabled input-numerico, resize input-group
PiemP Nov 28, 2023
648b415
fix: removed unused const
PiemP Nov 28, 2023
9d322b5
chore: linting
PiemP Nov 28, 2023
d86ecc3
fix: removed validation code for old field
PiemP Nov 28, 2023
78ed173
fix: autocomplete error message position
astagi Nov 28, 2023
1ab4637
Merge branch 'main' into fix_valid_input_number_bg
astagi Dec 5, 2023
e2dfb17
chore: add includes example for autocomplete form
astagi Dec 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
274 changes: 155 additions & 119 deletions docs/esempi/form/index.html
View file
Open in desktop
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
Loading