Form validation single pages - valider vos formulaires scriptés avec Bootstrap / Jquery

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

<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>

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>';

“Titre” et “Image” sont ok, par contre les autres champs en rouge n'ont pas été renseignés