Codice Form
Struttura della pagina
<header class="it-header-wrapper it-header-sticky"
data-bs-position-type="fixed"
data-bs-toggle="sticky"
data-bs-target="#header-nav-wrapper"
data-bs-sticky-class-name="is-sticky">
{% include html_docs/header/topbar.html %}
<div class="it-nav-wrapper">
{% include html_docs/header/center_menu-oriz.html %}
{% include html_docs/header/navbar_oriz.html %}
</div>
</header>
<main>
<div class="container">
<h1>Titolo form</h1>
<form class="my-5" id="justValidate" action="index.html" method="post">
{% include esempi-lombardia/account_posta.html %}
{% include esempi-lombardia/indirizzo.html %}
{% include esempi-lombardia/datepickers.html %}
{% include esempi-lombardia/radiobuttons.html %}
{% include esempi-lombardia/checkboxes.html %}
{% include esempi-lombardia/toggles.html %}
<!-- *****************************************************************************************************+ -->
<div class="row">
<div class="col-12">
<div class="float-end">
<button type="button" class="btn btn-outline-primary">Annulla</button>
<button type="submit" class="btn btn-primary">Invio</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>
</div> <!-- end container -->
</main>
{% include html_docs/footer/footer.html %}
La struttura anche in questo caso è semplice:
Il tag <header> contienela barra istituzionale composta da:
- topbar
- header_menu-oriz
descritta più sotto. - il menu_orizzontale
Nel tag <main> il <div class="container"> mantiene il form compatto al centro dello schermo, lasciando spazio in bianco ai lati sugli schermi di ampie dimensioni.
Inoltre, per staccare verticalmente i campi del form dal menù orizzontale è stata usata la classe my-5 sul tag del form.
header_menu-oriz
<div class="it-header-center-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper d-flex justify-content-between">
<div class="it25-left-zone d-flex justify-content-start">
<div class="it-brand-wrapper d-flex">
<div class="it-brand-text">
<div class="it-brand-title d-inline">
<span class="it25-app-name d-none d-md-inline">Nome applicativo</span>
</div>
</div>
</div>
</div>
<div class="it-right-zone">
</div>
</div>
</div>
</div>
</div>
</div>La validazione
La validazione dell’input, a titolo di esempio, è stata realizzata con il seguente script a fondo pagina:
<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,
})
validate
.addField('#inputEmail4', [
{
rule: 'required',
errorMessage: 'Questo campo è richiesto',
},
{
rule: 'email',
errorMessage: 'Inserire email corretta',
},
])
.addField('#exampleInputPassword9', [
{
rule: 'required',
errorMessage: 'Questo campo è richiesto',
},
])
.addField('#formNome', [
{
rule: 'required',
errorMessage: 'Questo campo è richiesto',
},
])
.addField('#formCognome', [
{
rule: 'required',
errorMessage: 'Questo campo è richiesto',
sucessMessage: 'Validato',
},
])
.addField('#inputAddress', [
{
rule: 'required',
errorMessage: 'Questo campo è richiesto',
},
])
.addField('#civico', [
{
rule: 'required',
errorMessage: 'Questo campo è richiesto',
},
])
.addField('#inputCity', [
{
rule: 'required',
errorMessage: 'Questo campo è richiesto',
},
])
.addField('#inputCAP', [
{
rule: 'required',
errorMessage: 'Questo campo è richiesto',
},
{
rule: 'minNumber',
value: 20001,
errorMessage: 'I CAP della Lombardia sono superiori a 20000',
},
{
rule: 'maxNumber',
value: 46100,
errorMessage: 'I CAP della Lombardia non sono superiori a 46100',
}
])
.addField('#defaultSelect', [
{
rule: 'required',
errorMessage: 'Questo campo è richiesto',
},
])
.addField('#data_nascita', [
{
rule: 'required',
errorMessage: 'Questo campo è richiesto',
},
])
.addField('#accessibleAutocomplete', [
{
rule: 'required',
errorMessage: 'Questo campo è richiesto',
},
{
validator: (value) => {
return ['Bergamo', 'Brescia', 'Como', 'Cremona', 'Lecco', 'Lodi', 'Mantova', 'Monza e della Brianza', 'Milano', 'Sondrio', 'Varese'].includes(value);
},
errorMessage: 'Puoi scegliere solo province lombarde',
},
])
.addRequiredGroup('#group_mezzi0', 'Scegli almeno un’opzione')
.addRequiredGroup('#group_mezzi1', 'Scegli almeno un’opzione')
.onSuccess((event) => {
document.forms['justValidate'].submit()
})
.onFail((fields) => {
errorWrapper.innerHTML = ''
errorWrapper.innerHTML = errorMessage
errorWrapper.scrollIntoView()
})
})
</script>