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

https://getbootstrap.com/docs/5.1/forms/validation/

à 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