Validations côté serveur sur page modal

Par MAM, il y a 6 ans

PHP

Bonjour à tous,

Voila je rencontre un petit problème avec mon code.
J'ai une page modal contenant un formulaire de création présenté dans le code ci-dessous

<?php require('../../../model/dbconfig.php'); $typeLocalite = $db->query('SELECT type_localite_id, libelle FROM type_localite ORDER BY 2'); $idTypeLocalite = ''; $libelle = ''; $abbrLocalite = ''; $localiteParent = ''; $error = false; $errorMsg = ''; if(strtolower($_SERVER['REQUEST_METHOD']) == 'post') { if (!empty($_POST['idTypeLocalite']) AND !empty($_POST['libelle']) AND !empty($_POST['localiteParent'])) { $idTypeLocalite = $_POST['idTypeLocalite']; $libelle = $_POST['libelle']; $abbrLocalite = $_POST['abbrLocalite']; $localiteParent = $_POST['localiteParent']; } else { $error = true; $errorMsg = 'Veuillez renseigner tous le champs s\'il vous plait'; } } ?> <div class="modal-header"> <h5 class="modal-title" id="exampleModalCenterTitle">Région</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form method="post" action="index.php"> <?php if($error): ?> <div class="alert alert-danger alert-dismissible fade show" role="alert"> <?= $errorMsg; ?> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <?php endif; ?> <div class="form-row"> <div class="col"> <select id="idTypeLocalite" name="idTypeLocalite" class="form-control" required="required"> <option value="">Sélectionner le type de localité</option> <?php while($result = $typeLocalite->fetch()): ?> <option value="<?= $result['type_localite_id']; ?>"> <?= $result['libelle'] ?> </option> <?php endwhile; ?> </select> </div> <div class="col"> <input type="text" name="libelle" class="form-control" placeholder="Libellé" required="required"> </div> </div> <div class="form-row" style="margin-top: 15px;"> <div class="col"> <input type="text" name="abbrLocalite" class="form-control" placeholder="Code/Abréviation" required="required"> </div> <div class="col"> <input type="text" name="localiteParent" class="form-control" placeholder="Localité parent" required="required"> </div> </div> <center style="margin-top: 40px;"> <button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button> <button type="submit" class="btn btn-success" name="VALIDER">Valider</button> </center> </form> </div>

En plus des validations côté client avec l'attribut "required", j'ai aussi fait des validations côté serveur en vérifiant si les champs sont vides.
Côté client, l'attribut "required" réagit comme je le souhaite, quand je valide mon formulaire avec un/des champs vides, la page modal ne ferme pas...mais côte serveur, la page modal ferme, chose qui me dérange.

Je souhaite donc que côté serveur, ma page modal réagisse comme côte client, c'est à dire que même quand je supprime l'attribut "required" et que je tiens seulement compte des validations côté serveur, si je valide le formulaire avec un/des champs vides, la page ne ferme pas et m'affiche le message d'erreur que j'aurais programmé.

Merci de m'apporter votre expertise.

4 réponses

Balsakup, il y a 6 ans

Salut,

Il faut que tu faces ta requête serveur en Ajax, ça évitera de rafraichir ta page et de fermer ta modale.

MAM, il y a 6 ans

Pour dire vrai, je ne m'y connais pas en Ajax...n'existe-t-il pas d'autres moyens ??

fouz09, il y a 6 ans

Donne un indentifiant à ta modal (ex : id = 'mymodal')
et insere ce script en bas de ta page

<?php if($error == true): ?> <script> $('#mymodal').modal('show');</script> <?php endif;?>

j'espere que ca pourrais t'aider

Lartak, il y a 6 ans

Bonsoir.
Pour information, l'élément HTML <center> est obsolète et déprécié depuis un bon bout de temps.

Obsolète
Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.
Cet élément a été déprécié en HTML4 (et XHTML 1) au profit de la propriété CSS text-align qui peut être appliqué à l'élément <div> ou à un élément <p>. Pour centrer des blocs, on utilisera d'autres propriétés (margin-left et margin-right avec la valeur auto par exemple ou les boîtes flexibles).

Source: <center> : l'élément de texte centré - HTML (HyperText Markup Language) | MDN.