Form validation single pages - valider vos formulaires scriptés avec Bootstrap / Jquery
Bootstrap et JQuery sont inclus par défaut dans concretecms, et relativement à jours à partir de la v8, il suffit donc d'inclure les fonctions sans besoins d'ajouter les librairies
Doc officielle Bootstrap
à ajouter au début du script
<script>
//jquery validate form script
$( document ).ready(function() {
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
});
</script>
dans le code php
la classe needs-validation & l'instruction novalidate dans la balise form et “ required” pour les champs requis
echo '<form method="get" class="needs-validation" action="validate_new_recipe" novalidate>'; ... echo '<div class="form-group"> <label class="control-label">Titre</label> <input type="text" name="titre" id="titre" class="form-control" required/> </div>';
Exemple de résultat
“Titre” et “Image” sont ok, par contre les autres champs en rouge n'ont pas été renseignés
