info:concrete5:59:formvalidation

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
info:concrete5:59:formvalidation [2025/09/19 04:55] – supprimée - modification externe (Date inconnue) 127.0.0.1info:concrete5:59:formvalidation [2025/09/19 04:55] (Version actuelle) – ↷ Page déplacée de info:concrete5:58:formvalidation à info:concrete5:59:formvalidation radeff
Ligne 1: Ligne 1:
 +====== Form validation single pages - valider vos formulaires scriptés avec Bootstrap / Jquery ======
 +<note tip>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</note>
 +===== Doc officielle Bootstrap =====
 +https://getbootstrap.com/docs/5.1/forms/validation/
  
 +===== à ajouter au début du script =====
 +<code js>
 +<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>
 +</code>
 +
 +===== dans le code php =====
 +la classe //needs-validation// & l'instruction //novalidate// dans la balise //form// et //" required"// pour les champs requis
 +<code php>
 +  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>';
 +</code>
 +
 +===== Exemple de résultat =====
 +"//Titre//" et "//Image//" sont ok, par contre les autres champs en rouge n'ont pas été renseignés
 +
 +{{:info:concrete5:58:firefox_screenshot_2023-05-13t07-56-24.272z.png?nolink|}}