Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1452 connectés 

  FORUM HardWare.fr
  Programmation
  PHP

  Site one page, bootstrap 4 et validation PHP

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Site one page, bootstrap 4 et validation PHP

n°2342224
tompouss
Petit chat
Posté le 27-11-2019 à 12:32:20  profilanswer
 

Bonjour,
 
 
je suis entrain de bosser sur un site one page contenant 3 formulaires et utilisant avec Boostrap 4.
 
J'ai suivi les recommandations Boostrap 4 concernant la validation des données, à savoir utiliser la validation HTML 5, qui fonctionne plutot pas mal.
https://getbootstrap.com/docs/4.4/c [...] validation
 
 
=> si les données sont valides, la page scroll jusqu'au formulaire suivant (c'est du javascript et le scroll fonctionne avec des ancres)
 
 
 
 
Mais je me demandais comment gérer la validation côté serveur sachant que les données seront introduites en db tout en interférant pas avec le front ?
Dois-je utiliser de l'ajax d'office ?
 
un de mes formulaires:

Code :
  1. "<form class="need-validation" role="form" id="register-form" method="post" action="forms_treat/form2.php" novalidate>
  2.                                     <div class="alert alert-danger alert-dismissible fade show form-alert d-none" role="alert">
  3.                                         <strong><?= $translations['FORM_ERROR'] ?></strong>
  4.                                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  5.                                             <span aria-hidden="true">&times;</span>
  6.                                         </button>
  7.                                     </div>
  8.                                     <div class="form-group input-group-lg custom-control custom-checkbox">
  9.                                         <input name="more18" class="custom-control-input is-required" id="form__input--more18" type="checkbox" required>
  10.                                         <label for="form__input--more18" class="custom-control-label">
  11.                                             <span><?= $translations['CONFIRM_AGE'] ?></span>
  12.                                         </label>
  13.                                         <div class="invalid-feedback">
  14.                                             <?php echo $translations['FIELD_ERROR'] ?>
  15.                                         </div>
  16.                                     </div>
  17.                                     <div class="form-group">
  18.                                         <label for="country">Country</label>
  19.                                         <select required class="form-control" name="country" id="country">
  20.                                             <option value="Belgium">Belgium</option>
  21.                                         </select>
  22.                                         <div class="invalid-feedback">
  23.                                             <?php echo $translations['FIELD_ERROR'] ?>
  24.                                         </div>
  25.                                     </div>
  26.                                     <div class="form-row">
  27.                                         <div class="form-group col-md-4">
  28.                                             <label for="inputGender">Gender</label>
  29.                                             <select required name="gender" class="form-control form__select--gender" id="inputGender">
  30.                                                 <option class="form__option--sex-item" value="">
  31.                                                 </option>
  32.                                                 <option class="form__option--sex-item" value="M">
  33.                                                     <?php echo $translations['MALE'] ?>
  34.                                                 </option>
  35.                                                 <option class="form__option--sex-item" value="F">
  36.                                                     <?php echo $translations['FEMALE'] ?>
  37.                                                 </option>
  38.                                             </select>
  39.                                             <div class="invalid-feedback">
  40.                                                 <?php echo $translations['FIELD_ERROR'] ?>
  41.                                             </div>
  42.                                         </div>
  43.                                         <div class="form-group col-md-4">
  44.                                             <label for="inputFirstname">Firstname</label>
  45.                                             <span class="fa fa-question-circle ml-2" data-toggle="tooltip" title="Alphabetic and hyphen only"></span>
  46.                                             <input required type="text" name="first_name" value="Thomas" class="form-control" minlength="2" maxlength="32" pattern="^[A-Za-z -']+$" id="inputFirstname" placeholder="Firstname">
  47.                                             <div class="invalid-feedback">
  48.                                                 <?php echo $translations['FIELD_ERROR'] ?>
  49.                                             </div>
  50.                                         </div>
  51.                                         <div class="form-group col-md-4">
  52.                                             <label for="inputLastname">Lastname</label>
  53.                                             <span class="fa fa-question-circle ml-2" data-toggle="tooltip" title="Alphabetic and hyphen only"></span>
  54.                                             <input required type="text" name="last_name" value="Brenard" class="form-control" minlength="2" maxlength="32" pattern="^[A-Za-z -']+$" id="inputLastname" placeholder="Lastname">
  55.                                             <div class="invalid-feedback">
  56.                                                 <?php echo $translations['FIELD_ERROR'] ?>
  57.                                             </div>
  58.                                         </div>
  59.                                     </div>
  60.                                     <div class="form-row">
  61.                                         <div class="form-group col-md-8">
  62.                                             <label for="inputAddress">Address</label>
  63.                                             <span class="fa fa-question-circle ml-2" data-toggle="tooltip" title="Allowed: Alphabetic, dot, and hyphen"></span>
  64.                                             <input required type="text" name="address" class="form-control" minlength="3" pattern="^[A-Za-z0-9 -'.]+$" id="inputAddress" placeholder="1234 Main St">
  65.                                             <div class="invalid-feedback">
  66.                                                 <?php echo $translations['FIELD_ERROR'] ?>
  67.                                             </div>
  68.                                         </div>
  69.                                         <div class="form-group col-md-4">
  70.                                             <label for="inputHouseNumber">House number</label>
  71.                                             <span class="fa fa-question-circle ml-2" data-toggle="tooltip" title="Allowed: Alphabetic, digits"></span>
  72.                                             <input required type="text" name="address_no" class="form-control" minlength="1" maxlength="4" pattern="[0-9A-Za-z]" id="inputHouseNumber" placeholder="Apartment, studio, or floor">
  73.                                             <div class="invalid-feedback">
  74.                                                 <?php echo $translations['FIELD_ERROR'] ?>
  75.                                             </div>
  76.                                         </div>
  77.                                     </div>
  78.                                     <div class="form-row">
  79.                                         <div class="form-group col-md-8">
  80.                                             <label for="inputCity">City</label>
  81.                                             <span class="fa fa-question-circle ml-2" data-toggle="tooltip" title="The last tip!"></span>
  82.                                             <input required type="text" name="city" minlength="2" pattern="^[A-Za-z -{0,}'.]+$" class="form-control" id="inputCity" placeholder="City">
  83.                                             <div class="invalid-feedback">
  84.                                                 <?php echo $translations['FIELD_ERROR'] ?>
  85.                                             </div>
  86.                                         </div>
  87.                                         <div class="form-group col-md-4">
  88.                                             <label for="inputZip">Zip</label>
  89.                                             <span class="fa fa-question-circle ml-2" data-toggle="tooltip" title="The last tip!"></span>
  90.                                             <input required type="text" name="zip" class="form-control" minlength="3" pattern="^[A-Za-z0-9]+$" id="inputZip" placeholder="Zip">
  91.                                             <div class="invalid-feedback">
  92.                                                 <?php echo $translations['FIELD_ERROR'] ?>
  93.                                             </div>
  94.                                         </div>
  95.                                     </div>
  96.                                     <div class="form-group">
  97.                                         <label for="form__input--phone"><?= $translations['PHONE'] ?></label>
  98.                                         <span class="fa fa-question-circle ml-2" data-toggle="tooltip" title="Allowed: digits only"></span>
  99.                                         <input required type="number" name="phone" class="form-control" id="form__input--phone">
  100.                                         <div class="invalid-feedback">
  101.                                             <?php echo $translations['FIELD_ERROR'] ?>
  102.                                         </div>
  103.                                     </div>
  104.                                     <div class="form-group">
  105.                                         <label for="form__input--birthday">
  106.                                             <?= $translations['DOB'] ?>
  107.                                         </label>
  108.                                         <input type="date" class="form-control" id="form__input--birthday" value="" min="" max="" />
  109.                                         <div class="invalid-feedback">
  110.                                             <?php echo $translations['FIELD_ERROR'] ?>
  111.                                         </div>
  112.                                     </div>
  113.                                     <button type="submit" class="btn btn-square btn-lg btn-md btn-space" id="form1__btn-submit">Send
  114.                                     </button>
  115.                                 </form>"


         
         
        Le Javascript:
         
 

Code :
  1. $('#register-form').on('submit', function (event) {
  2.         event.preventDefault();
  3.         event.stopPropagation();
  4.      
  5.         if ($('#register-form').isValid() === false) {
  6.           $('.form-alert').removeClass('d-none');
  7.         } else {
  8.           userInfos.firstname = $('#inputFirstname').val();
  9.           $section = $('#section-questions');
  10.           goToNextSection($section);
  11.         }
  12.         $('#register-form').addClass('was-validated');
  13.         return false;
  14.       });

     
 
 
 
pour l'instant voici ce que j'ai dans mon fichier php

Code :
  1. if (isset($_POST)) {
  2.     $data = [];
  3.     $errors = false;
  4.     $user_data = [];
  5.     $quizzName = $_SESSION['quizz_path'];
  6.     $user_data['lang'] = $_SESSION['lang'];
  7.     $user_data['first_name'] = filter_input(INPUT_POST, 'first_name', FILTER_SANITIZE_STRING);
  8.     $user_data['last_name'] = trim(filter_input(INPUT_POST, 'last_name', FILTER_SANITIZE_STRING));
  9.     $user_data['gender'] = trim(filter_input(INPUT_POST, 'gender', FILTER_SANITIZE_STRING));
  10.     $user_data['address'] = trim(filter_input(INPUT_POST, 'address', FILTER_SANITIZE_STRING));
  11.     $user_data['address_no'] = trim(filter_input(INPUT_POST, 'address_no', FILTER_SANITIZE_STRING));
  12.     $user_data['city'] = trim(filter_input(INPUT_POST, 'city', FILTER_SANITIZE_STRING));
  13.     $user_data['zip'] = trim(filter_input(INPUT_POST, 'zip', FILTER_SANITIZE_STRING));
  14.     $user_data['phone'] = trim(filter_input(INPUT_POST, 'phone', FILTER_SANITIZE_STRING));
  15.     $_SESSION['user_firstname'] = $user_data['first_name'];
  16.  
  17.     //get birtdhay (cant sanatize)
  18.     $birthday = $_POST["birthday"];
  19.     foreach ($user_data as $key => $value) {
  20.         if (empty($user_data[$key])) {
  21.             $errors = true;
  22.             break;
  23.         }
  24.     }
  25.     $quizzName = $_SESSION['quizz_path'];
  26.     //formatting birthday date
  27.     $format = 'Y-m-d';
  28.     $user_data['birthday'] = DateTime::createFromFormat($format, $birthday);
  29.     $previousURL = $_SERVER['HTTP_REFERER'];
  30.     if ($errors) //if errors have been detected in the form do nothing
  31.     {
  32.      
  33.     } else { //else, go to next form
  34.      
  35.     }


 
 
Merci pour votre aide
 
Tom


Message édité par tompouss le 27-11-2019 à 12:33:57

---------------
collectionneur de pâtes thermiques
mood
Publicité
Posté le 27-11-2019 à 12:32:20  profilanswer
 

n°2342353
B4X
kebab-case
Posté le 28-11-2019 à 12:31:39  profilanswer
 

"Mais je me demandais comment gérer la validation côté serveur"
 
Tout à la fin, quand ton utilisateur a rempli tes 3 formulaires.
Tu fais déjà toute une série de vérifications en html/js. Si l'utilisateur arrive jusqu'à la dernière section c'est que manifestement tout ce qui précède est conforme, et devrait donc également passer tes ultimes tests PHP côté serveur lorsqu'il soumettra le formulaire.


---------------
In vanitas veritas.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  PHP

  Site one page, bootstrap 4 et validation PHP

 

Sujets relatifs
Afficher flux http dans page html[PHP] - nesbot/Carbon: diffForHumans() amène une erreur 500
Fonction mail() de PHP avec plusieurs serveurs SMTPRechercheV en PHP ?
Erreur Excerpt - Impossible d'enregistrer une page du thème[PHP] Remplacer des mots dans une string par des valeurs d'un tableau
[PHP] Obtenir l'URL précédente[PHP] Systme d'alerte
Problème d'alloc mémoire avec PHP et lib GD pour générer des imagesPHP/Ruby
Plus de sujets relatifs à : Site one page, bootstrap 4 et validation PHP


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR