Form validation single pages - valider vos formulaires scriptés avec Bootstrap / Jquery
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