Comment valider des formulaires avec Bootstrap 5

AmorcerSam Norton • 10 mars 2021 • 7 minutes de lecture

La validation des formulaires est l’un des facteurs les plus critiques lorsqu’il s’agit de collecter des informations et de prévenir l’utilisation abusive des formulaires Web.

En plus de vous éviter d’éventuelles cyberattaques, la validation de formulaire protège également votre site Web contre les mauvaises entrées de formulaire. Lors de la soumission du formulaire avec validation, l’utilisateur aura la possibilité de modifier les champs de données contenant des données non valides avant de les soumettre.

En général, vous avez besoin de la validation du formulaire comme mesure de sécurité, car les données de formulaire invalides sont l’une des principales sources de vulnérabilités de sécurité du site Web.

Les formulaires sont entièrement pris en charge dans Bootstrap 5. La plupart des composants sont principalement utilisés pour donner aux formulaires un aspect propre et réactif, ce qui peut être utilisé avec n’importe quelle taille d’écran. Alors que les formulaires Bootstrap 5 reçoivent automatiquement le formatage correct via des classes données, en ce qui concerne validation de formulaire vous devez configurer des classes supplémentaires et du JavaScript afin de profiter de son support de validation contemporain dès la sortie de la boîte.

Dans cet article, je vais vous montrer comment utiliser la validation de formulaire Bootstrap 5 pour présenter des commentaires exploitables décents sur les champs de données de formulaire tels que la zone de texte, la sélection, la case à cocher, le bouton radio ainsi que d’autres champs de formulaire bootstrap disponibles lors de la soumission du formulaire. Nous utiliserons JavaScript pour désactiver les soumissions de formulaires si des champs invalides sont entrés.

Noter: HTML 5 a ses propres moyens de validation, mais il a des limites, en particulier en ce qui concerne la prise en charge des navigateurs. L’une des limitations notables est le manque de personnalisation en ce qui concerne la gestion des messages d’erreur dont vous aurez besoin pour trouver un moyen d’être triés. Heureusement, Bootstrap 5 a à portée de main des styles de validation de formulaire contemporains.

Comment ça fonctionne

Bootstrap 5 est livré avec des styles de validation très faciles à utiliser mais puissants pour les champs de saisie. Ces styles de validation sont utilisés pour présenter certains styles de formulaire et messages, à la fois des erreurs et des états de réussite pour les champs de formulaire, et peuvent être déclenchés lorsque vous soumettez le formulaire réel.

Éléments HTML pris en charge

Les styles de validation Bootstrap 5 peuvent être utilisés sur les éléments HTML suivants, y compris jusqu’à un .form-control classe dans les groupes d’entrée.

• </strong></li> </ul> <p>Pour l’élément d’entrée, vous pouvez utiliser les styles de validation Bootstrap 5 sur les balises couramment utilisées telles que la zone de texte, le bouton radio, la case à cocher et la balise d’élément de fichier.</p> <p>La validation du formulaire Bootstrap 5 a essentiellement deux états: <strong>Erreur</strong> et <strong>Succès</strong>. Celles-ci sont représentées par les classes sémantiques suivantes.</p> <ul> <li><strong>.is-invalid: Erreur</strong></li> <li><strong>.is-valid: succès</strong></li> </ul> <p>Jetons un coup d’œil au code pour rendre ces deux états de validation:</p><div class="jeg_ad jeg_ad_article jnews_content_inline_3_ads "><div class='ads-wrapper align-center '><div class='ads_code'><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1560061249950980" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-1560061249950980" data-ad-slot="4120487455"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></div></div> <pre class="brush: xml; title: ; notranslate" title=""> <div class="col-md-4"> <label for="validationSuccess" class="form-label text-success">Input with success</label> <input type="text" class="form-control is-valid" id="validationSuccess" required> </div> <div class="col-md-4"> <label for="validationError" class="form-label text-danger">Input with error</label> <input type="text" class="form-control is-invalid" id="validationError" required> </div> </pre> <p>Le balisage que vous voyez ci-dessus est très similaire aux entrées habituelles avec l’ajout de quelques classes CSS pour appliquer l’apparence et la convivialité de l’état.</p> <p>Passons en revue le code dont vous devez être conscient:</p> <ul> <li>La première entrée est l’état de réussite. Le champ de saisie doit avoir une classe appelée <strong>.est valable </strong>ajouté à lui.</li> <li>La deuxième entrée est l’état d’erreur. Le champ de saisie doit avoir une classe appelée <strong>.est invalide</strong> ajouté à lui.</li> <li>Notez que chaque entrée a une icône sur le bord droit de celle-ci. Ces icônes sont automatiquement ajoutées lorsque vous incluez les fichiers CSS d’amorçage requis.</li> <li>Chaque <strong><label></strong> la balise a une classe <strong>.text-success </strong>et <strong>.text-danger</strong> ajouté à lui. Celles-ci ne sont pas requises dans la validation du formulaire, mais elles sont uniquement à des fins de démonstration pour colorer l’étiquette afin qu’elle corresponde à la couleur de l’état.</li> </ul> <p>Jetons un coup d’œil à ce à quoi ces entrées de validation devraient ressembler dans le navigateur:</p> <figure id="attachment_620839" class="alignleft"><img decoding="async" loading="lazy" class="size-full wp-image-620839" src="https://designmodo.com/wp-content/uploads/2021/03/image1.png" alt="Comment valider des formulaires avec Bootstrap 5" width="531" height="229" srcset="https://designmodo.com/wp-content/uploads/2021/03/image1.png 531w, https://designmodo.com/wp-content/uploads/2021/03/image1-5x3.png 5w, https://designmodo.com/wp-content/uploads/2021/03/image1-300x129.png 300w" sizes="(max-width: 531px) 100vw, 531px"/></figure> <p>Ensuite, voyons comment les messages de validation de formulaire fonctionnent avec la validation de formulaire Bootstrap 5 à un niveau très basique. La validation de formulaire Bootstrap 5 fournit également deux états pour les messages de validation de formulaire similaires à la validation d’entrée ci-dessus: <strong>Erreur</strong> et <strong>Succès</strong>.</p> <p>Celles-ci sont représentées par les classes sémantiques suivantes.</p> <ul> <li><strong>.invalid-feedback: Erreur</strong></li> <li><strong>.valid-feedback: succès</strong></li> </ul> <p>Jetons un coup d’œil au code pour rendre ces deux états de messages de validation:</p> <pre class="brush: xml; title: ; notranslate" title=""> <div class="col-md-4"> <label for="validationSuccess" class="form-label text-success">Input with success</label> <input type="text" class="form-control is-valid" id="validationSuccess" required> <div class="valid-feedback"> This is a success state form validation message! </div> </div> <div class="col-md-4"> <label for="validationError" class="form-label text-danger">Input with error</label> <input type="text" class="form-control is-invalid" id="validationError" required> <div class="invalid-feedback"> This is an error state form validation message! </div> </pre> <p>Passons en revue le code dont vous devez être conscient:</p> <ul> <li>Le div avec une classe <strong>.valid-feedback</strong> est le message de validation du formulaire <strong>Succès.</strong> </li> <li>Le div avec une classe.<strong>rétroaction invalide</strong> est le message de validation du formulaire <strong>Erreur.</strong> </li> <li>Chaque classe indiquée ci-dessus doit être utilisée ensemble sous le champ de saisie, puis bootstrap à l’aide de JavaScript déterminera celle à afficher en fonction de l’entrée de l’utilisateur lors de la soumission du formulaire. Plus d’informations à ce sujet plus tard.</li> </ul> <p>Jetons un coup d’œil à ce à quoi ces entrées de validation devraient ressembler dans le navigateur:</p> <figure id="attachment_620840" class="alignleft"><img decoding="async" loading="lazy" class="size-full wp-image-620840" src="https://designmodo.com/wp-content/uploads/2021/03/image4.png" alt="Validation du formulaire Bootstrap" width="532" height="297" srcset="https://designmodo.com/wp-content/uploads/2021/03/image4.png 532w, https://designmodo.com/wp-content/uploads/2021/03/image4-5x3.png 5w, https://designmodo.com/wp-content/uploads/2021/03/image4-522x292.png 522w, https://designmodo.com/wp-content/uploads/2021/03/image4-300x167.png 300w" sizes="(max-width: 532px) 100vw, 532px"/></figure> <p>Comme vu ci-dessus, les entrées et les messages de validation de formulaire sont colorés pour correspondre à leur état. De plus, notez que nous avons utilisé <strong>.est valable</strong> et <strong>.est invalide</strong> pour correspondre à l’état pour une validation particulière.</p> <p>Cependant, avec Bootstrap et l’utilisation de JavaScript lors de la soumission du formulaire, vous n’avez pas besoin de mettre impérativement ces deux classes sur chaque champ de données. Bootstrap le gérera pour vous en conséquence. La validation du formulaire Bootstrap est appliquée à l’aide des deux pseudo-classes de CSS, <strong>:valide</strong> et<strong>:invalide</strong>. Bootstrap a examiné les styles de ces classes qui sont généralement appliqués avec l’utilisation de <strong>.a été validé</strong> classe dans le <strong></p> <form></strong> étiqueter. Le <strong>.est valable </strong>et <strong>.est invalide</strong> les classes peuvent toujours être utilisées à la place des pseudo-classes pour la validation côté serveur. Veuillez noter que si vous utilisez ces classes lors de la validation côté serveur, vous n’avez pas besoin d’ajouter <strong>.a été validé</strong> classer.</p> <h3><span id="validation-style-using-tooltips">Style de validation à l’aide des info-bulles</span><br /> </h3> <p>Bootstrap est également livré avec des styles d’info-bulles pour ses styles de validation contemporains. L’info-bulle ou info-bulle est un élément d’interface utilisateur courant où, en survolant un élément, une boîte contextuelle affiche les informations requises pour cet élément spécifique, mais dans ce cas, il s’agirait du message de validation.</p> <p>Pour que la fonction de validation des info-bulles fonctionne, vous devez utiliser <strong>.valid-tooltip</strong> ou <strong>.invalid-tooltip</strong> classe pour correspondre à l’état d’un style de validation particulier et d’un message de validation de formulaire au lieu d’utiliser <strong>.valid-feedback</strong> et <strong>.invalid-feedback</strong>. De plus, vous devez avoir un élément parent avec <strong>position: relative</strong> style pour le positionnement des info-bulles.</p> <p>Le code ci-dessous est identique au code ci-dessus, mais cette fois en utilisant une info-bulle car il s’agit d’un style de validation contemporain.</p> <pre class="brush: xml; title: ; notranslate" title=""> <div class="col-md-4 position-relative"> <label for="validationSuccess" class="form-label text-success">Input with success</label> <input type="text" class="form-control" value="Samuel Norton" required> <div class="valid-tooltip"> This is a success state form validation message! </div> </div> <div class="col-md-4 position-relative"> <label for="validationError" class="form-label text-danger">Input with error</label> <input type="text" class="form-control" id="validationError" required> <div class="invalid-tooltip"> This is an error state form validation message! </div> </div> </pre> <p>Jetons un coup d’œil à ce à quoi ces entrées de validation devraient ressembler dans le navigateur:</p> <figure id="attachment_620842" class="alignleft"><img decoding="async" loading="lazy" class="size-full wp-image-620842" src="https://designmodo.com/wp-content/uploads/2021/03/image3.png" alt="Validation JavaScript" width="539" height="306" srcset="https://designmodo.com/wp-content/uploads/2021/03/image3.png 539w, https://designmodo.com/wp-content/uploads/2021/03/image3-5x3.png 5w, https://designmodo.com/wp-content/uploads/2021/03/image3-300x170.png 300w" sizes="(max-width: 539px) 100vw, 539px"/></figure> <h3><span id="using-javascript">Utilisation de JavaScript</span><br /> </h3> <p>Voyons maintenant comment JavaScript peut aider nos styles de validation bootstrap à empêcher toute soumission invalide de la part des utilisateurs.</p> <p>Tout d’abord, jetez un œil au balisage suivant:</p> <pre class="brush: xml; title: ; notranslate" title=""> <form class="row g-3 requires-validation" novalidate> <div class="col-md-12"> <label for="username" class="form-label">Username:</label> <input type="text" class="form-control" id="username" required> <div class="valid-feedback"> Username looks good! </div> <div class="invalid-feedback"> Username is required! </div> </div> <div class="col-md-12"> <label for="password" class="form-label">Password:</label> <input type="text" class="form-control" id="password" required> <div class="valid-feedback"> Password looks good! </div> <div class="invalid-feedback"> Password is required! </div> </div> <div class="col-12"> <button class="btn btn-primary" type="submit">Login</button> </div> </form> </pre> <p>Regardons de plus près le balisage ci-dessus:</p> <ul> <li>La balise form a un <strong>novalidate</strong> attribut booléen. Cela empêche les info-bulles de commentaires par défaut du navigateur sans l’occlusion de l’accès aux API de validation de formulaire dans JavaScript.</li> <li>Nous n’avons pas inclus le <strong>.est valable</strong> et <strong>.est invalide</strong> classes sur chaque champ de données. Sangles de botte <strong>:invalide</strong> et <strong>:valide</strong> styles l’appliquera aux contrôles de formulaire avec l’utilisation de JavaScript.</li> <li>Nous avons ajouté un <strong>.requires-validation</strong> classe à l’intérieur de la balise form. Ce n’est pas une classe sémantique de bootstrap. Vous pouvez le renommer avec le nom de classe que vous préférez. Le but de cette classe est d’aider JavaScript à récupérer tous les éléments du formulaire pour appliquer des styles de validation d’amorçage personnalisés en conséquence (plus d’informations à ce sujet plus tard).</li> <li>Sur chaque champ de données ou entrées, nous avons ajouté le <strong>obligatoire</strong> attribut à la fin. Cela indique simplement qu’un champ de données particulier doit être rempli avant de soumettre le formulaire.</li> <li>Encore une fois, nous utilisons <strong>.valid-feedback</strong> et <strong>.invalid-feedback</strong> au bas de chaque champ de données. Le div avec une classe <strong>.valid-feedback</strong> est le message de validation du formulaire <strong>Succès</strong> Où, le div avec une classe <strong>.invalid-feedback</strong> est le message de validation du formulaire <strong>Erreur</strong> Etat.</li> </ul> <p>Ensuite, ajoutons le code JavaScript pour désactiver les soumissions de formulaire s’il y a des champs non valides lorsque l’utilisateur soumet le formulaire:</p> <pre class="brush: jscript; title: ; notranslate" title=""> <script> (function () { 'use strict' const forms = document.querySelectorAll('.requires-validation') Array.from(forms) .forEach(function (form) { form.addEventListener('submit', function (event) { if (!form.checkValidity()) { event.preventDefault() event.stopPropagation() } form.classList.add('was-validated') }, false) }) })() </script> </pre> <p>Le code JavaScript ci-dessus obtient simplement tous les formulaires via <strong>querySelectorAll</strong> et retourne une NodeList statique qui représente une liste des éléments du document à l’aide de la <strong>.requires-validation</strong> classer.</p> <p>Ensuite, pour chacun des formulaires trouvés, le code JavaScript ajoutera un <strong>EventListener</strong> qui sera appelé chaque fois que l’événement spécifié est livré et qui est soumis. Ainsi, chaque fois qu’un utilisateur soumet le formulaire, <strong>form.checkValidity () </strong>sera appelé. Cette méthode vérifie si le champ de données a des contraintes et remplit les contraintes données. En cas d’échec, le navigateur déclenche simplement un événement invalide et renvoie false.</p> <p>Donc, en cas d’échec, il appellera les deux méthodes JavaScript suivantes:</p> <ul> <li> <strong>preventDefault ()</strong> – une méthode qui empêchera simplement l’événement par défaut d’être pris comme il le serait normalement. Dans ce cas, la soumission du formulaire.</li> <li> <strong>stopPropagation ()</strong> – une méthode qui empêche la poursuite de la propagation (bouillonnement) de l’événement en cours.</li> </ul> <p>Enfin, il ajoutera <strong>.a été validé</strong> classe dans la balise form pour afficher l’état de validation du formulaire et les messages.</p> <p>Bootstrap couvre le <strong>:invalide</strong> et <strong>:valide</strong> styles à parent <strong>.a été validé</strong> classe lorsqu’elle est appliquée au formulaire. Vous pouvez réellement mettre le <strong>.a été validé</strong> classe à la balise de formulaire même sans l’aide de JavaScript, mais qui affichera automatiquement les états de validation du formulaire et les messages avant même que l’utilisateur ne soumette le formulaire. Cependant, avoir JavaScript pour s’occuper de l’événement de soumission et de validation du formulaire vous donnera un processus de validation contemporain plus sécurisé côté client.</p> <p>Voyons à quoi cela devrait ressembler dans le navigateur:</p> <figure id="attachment_620843" class="alignleft"><img decoding="async" loading="lazy" class="size-full wp-image-620843" src="https://designmodo.com/wp-content/uploads/2021/03/image2.png" alt="Code JavaScript" width="527" height="334" srcset="https://designmodo.com/wp-content/uploads/2021/03/image2.png 527w, https://designmodo.com/wp-content/uploads/2021/03/image2-5x3.png 5w, https://designmodo.com/wp-content/uploads/2021/03/image2-300x190.png 300w" sizes="(max-width: 527px) 100vw, 527px"/></figure> <h3><span id="putting-it-all-together">Mettre tous ensemble</span><br /> </h3> <p>Maintenant, pour mettre tout cela ensemble, créons une page d’inscription simple et voyons comment nous pouvons appliquer les styles de validation contemporains de Bootstrap 5 sur chaque champ de données.</p> <p>Ci-dessous le balisage.</p> <pre class="brush: xml; title: ; notranslate" title=""> <div class="form-body"> <div class="row"> <div class="form-holder"> <div class="form-content"> <div class="form-items"> <h3>Register Today</h3> <p>Fill in the data below.</p> <form class="requires-validation" novalidate> <div class="col-md-12"> <input class="form-control" type="text" name="name" placeholder="Full Name" required> <div class="valid-feedback">Username field is valid!</div> <div class="invalid-feedback">Username field cannot be blank!</div> </div> <div class="col-md-12"> <input class="form-control" type="email" name="email" placeholder="E-mail Address" required> <div class="valid-feedback">Email field is valid!</div> <div class="invalid-feedback">Email field cannot be blank!</div> </div> <div class="col-md-12"> <select class="form-select mt-3" required> <option selected disabled value="">Position</option> <option value="jweb">Junior Web Developer</option> <option value="sweb">Senior Web Developer</option> <option value="pmanager">Project Manager</option> </select> <div class="valid-feedback">You selected a position!</div> <div class="invalid-feedback">Please select a position!</div> </div> <div class="col-md-12"> <input class="form-control" type="password" name="password" placeholder="Password" required> <div class="valid-feedback">Password field is valid!</div> <div class="invalid-feedback">Password field cannot be blank!</div> </div> <div class="col-md-12 mt-3"> <label class="mb-3 mr-1" for="gender">Gender: </label> <input type="radio" class="btn-check" name="gender" id="male" autocomplete="off" required> <label class="btn btn-sm btn-outline-secondary" for="male">Male</label> <input type="radio" class="btn-check" name="gender" id="female" autocomplete="off" required> <label class="btn btn-sm btn-outline-secondary" for="female">Female</label> <input type="radio" class="btn-check" name="gender" id="secret" autocomplete="off" required> <label class="btn btn-sm btn-outline-secondary" for="secret">Secret</label> <div class="valid-feedback mv-up">You selected a gender!</div> <div class="invalid-feedback mv-up">Please select a gender!</div> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required> <label class="form-check-label">I confirm that all data are correct</label> <div class="invalid-feedback">Please confirm that the entered data are all correct!</div> </div> <div class="form-button mt-3"> <button id="submit" type="submit" class="btn btn-primary">Register</button> </div> </form> </div> </div> </div> </div> </div> </pre> <p>Ensuite, j’ai ajouté CSS pour personnaliser l’apparence de notre formulaire.</p> <pre class="brush: css; title: ; notranslate" title=""> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;900&display=swap'); *, body { font-family: 'Poppins', sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; } html, body { height: 100%; background-color: #152733; overflow: hidden; } .form-holder { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 100vh; } .form-holder .form-content { position: relative; text-align: center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; padding: 60px; } .form-content .form-items { border: 3px solid #fff; padding: 40px; display: inline-block; width: 100%; min-width: 540px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-align: left; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .form-content h3 { color: #fff; text-align: left; font-size: 28px; font-weight: 600; margin-bottom: 5px; } .form-content h3.form-title { margin-bottom: 30px; } .form-content p { color: #fff; text-align: left; font-size: 17px; font-weight: 300; line-height: 20px; margin-bottom: 30px; } .form-content label, .was-validated .form-check-input:invalid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label { color: #fff; } .form-content input[type=text], .form-content input[type=password], .form-content input[type=email], .form-content select { width: 100%; padding: 9px 20px; text-align: left; border: 0; outline: 0; border-radius: 6px; background-color: #fff; font-size: 15px; font-weight: 300; color: #8D8D8D; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; margin-top: 16px; } .btn-primary { background-color: #6C757D; outline: none; border: 0px; box-shadow: none; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #495056; outline: none !important; border: none !important; box-shadow: none; } .form-content textarea { position: static !important; width: 100%; padding: 8px 20px; border-radius: 6px; text-align: left; background-color: #fff; border: 0; font-size: 15px; font-weight: 300; color: #8D8D8D; outline: none; resize: none; height: 120px; -webkit-transition: none; transition: none; margin-bottom: 14px; } .form-content textarea:hover, .form-content textarea:focus { border: 0; background-color: #ebeff8; color: #8D8D8D; } .mv-up { margin-top: -9px !important; margin-bottom: 8px !important; } .invalid-feedback { color: #ff606e; } .valid-feedback { color: #2acc80; } </pre> <p>Enfin, nous utiliserons le même code JavaScript ci-dessus pour empêcher l’utilisateur de soumettre des champs vides ainsi que pour afficher les états de validation et les styles de message de validation de formulaire.</p> <p>J’ai compilé le code ci-dessous sur Codepen. N’hésitez pas à le modifier et à jouer.</p> <p class="codepen" data-height="665" data-theme-id="dark" data-default-tab="html,result" data-user="samnorton" data-slug-hash="oNYajYM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Registration Form (Bootstrap 5 Validation)"> <span>Voir le stylo <a target="_blank" href="https://codepen.io/samnorton/pen/oNYajYM" data-wpel-link="external" rel="nofollow noopener"><br />Formulaire d’inscription (validation Bootstrap 5)</a> par Sam Norton (<a target="_blank" href="https://codepen.io/samnorton" data-wpel-link="external" rel="nofollow noopener">@samnorton</a>)<br />sur <a target="_blank" href="https://codepen.io" data-wpel-link="external" rel="nofollow noopener">CodePen</a>.</span> </p> <h2><span id="wrapping-up">Emballer</span><br /> </h2> <p>La création de sites Web et même d’applications aujourd’hui est beaucoup plus difficile et prend du temps qu’auparavant. L’utilisation des méthodes et des styles de validation contemporains de Bootstrap 5 vous fournira un moyen simple, mais des commentaires précieux et exploitables à vos utilisateurs prêts à l’emploi sans trop vous soucier des styles.</p> <p>La meilleure partie est que vous pouvez toujours personnaliser le message de validation du formulaire, y compris les styles à votre goût sans réinventer la roue.</p> <div class="block-bottom"> <div class="fix-8-12 subscribe-form ae-1" style="background:linear-gradient(-45deg, #0982a7,hsla(218, 100%, 26%, 1));"> <h5 class="small margin-bottom-2">Vous aimez ce que vous lisez? Abonnez-vous à nos meilleures histoires.</h5> </div> </div></div> <p> — to <a href="https://designmodo.com/validate-forms-bootstrap/ ">designmodo.com </a></p> <div class="mads-block"></div> </div> </div> <div class="jeg_share_bottom_container"></div> <div class='jeg_push_notification single_post'> <div class="jeg_push_notification_content"> <p>Get real time update about this post categories directly on your device, subscribe now.</p> <div class="jeg_push_notification_button"> <input type="hidden" name="post-category" value="generale"> <input type="hidden" name="button-subscribe" value="Subscribe"> <input type="hidden" name="button-unsubscribe" value="Unsubscribe"> <input type="hidden" name="button-processing" value="Processing . . ."> <a data-action="unsubscribe" data-type="category" class="button" href="#"> <i class="fa fa-bell-slash-o"></i> Unsubscribe </a> </div> </div> </div> <div class="jeg_ad jeg_article jnews_content_bottom_ads "><div class='ads-wrapper '><div class='ads_code'><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1560061249950980" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-1560061249950980" data-ad-slot="3396814757"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></div></div><div class="jnews_prev_next_container"></div><div class="jnews_author_box_container "> <div class="jeg_authorbox"> <div class="jeg_author_image"> <img alt='Caleb' src='https://secure.gravatar.com/avatar/5955a4ab55ab39e4f1f103b50a6d1ea9?s=80&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/5955a4ab55ab39e4f1f103b50a6d1ea9?s=160&d=mm&r=g 2x' class='avatar avatar-80 photo' height='80' width='80' loading='lazy' decoding='async'/> </div> <div class="jeg_author_content"> <h3 class="jeg_author_name"> <a href="https://mycamer.net/author/admin237/"> Caleb </a> </h3> <p class="jeg_author_desc"> </p> <div class="jeg_author_socials"> <a target='_blank' href='https://mycamer.net' class='url'><i class='fa fa-globe'></i> </a> </div> </div> </div> </div><div class="jnews_related_post_container"></div><div class='jnews-autoload-splitter' data-url="https://mycamer.net/comment-valider-des-formulaires-avec-bootstrap-5/" data-title="Comment valider des formulaires avec Bootstrap 5" data-id="232" data-prev="https://mycamer.net/la-neurochirurgie-integra-iart-se-developpe-sequentiellement-au-milieu-des-problemes-dapprovisionnement/" ></div><div class="jnews_popup_post_container"></div><div class="jnews_comment_container"></div> </div> </div> <div class="jeg_sidebar jeg_sticky_sidebar col-md-4"> <div class="jegStickyHolder"><div class="theiaStickySidebar"><!-- MagenetMonetization 5 --><div class="widget widget_jnews_module_block_21" id="jnews_module_block_21-1"><div class="jeg_postblock_21 jeg_postblock jeg_module_hook jeg_pagination_disable jeg_col_1o3 jnews_module_232_0_6476338901ec1 " data-unique="jnews_module_232_0_6476338901ec1"> <div class="jeg_block_heading jeg_block_heading_5 jeg_subcat_right"> <h3 class="jeg_block_title"><span>Recommended<strong>.</strong></span></h3> </div> <div class="jeg_block_container"> <div class="jeg_posts jeg_load_more_flag"><article class="jeg_post jeg_pl_sm no_thumbnail format-standard"> <div class="jeg_thumb"> <a href="https://mycamer.net/le-maire-adams-et-le-commissaire-du-dcas-pinnock-mettent-en-oeuvre-une-nouvelle-technologie-sur-les-voitures-du-parc-municipal-pour-reduire-la-vitesse/"><div class="thumbnail-container animate-lazy no_thumbnail size-715 "></div></a> </div> <div class="jeg_postblock_content"> <h3 class="jeg_post_title"> <a href="https://mycamer.net/le-maire-adams-et-le-commissaire-du-dcas-pinnock-mettent-en-oeuvre-une-nouvelle-technologie-sur-les-voitures-du-parc-municipal-pour-reduire-la-vitesse/">Le maire Adams et le commissaire du DCAS Pinnock mettent en œuvre une nouvelle technologie sur les voitures du parc municipal pour réduire la vitesse</a> </h3> <div class="jeg_post_meta"><div class="jeg_meta_date"><a href="https://mycamer.net/le-maire-adams-et-le-commissaire-du-dcas-pinnock-mettent-en-oeuvre-une-nouvelle-technologie-sur-les-voitures-du-parc-municipal-pour-reduire-la-vitesse/" ><i class="fa fa-clock-o"></i> août 11, 2022</a></div></div> </div> </article><article class="jeg_post jeg_pl_sm format-standard"> <div class="jeg_thumb"> <a href="https://mycamer.net/comment-vaincre-une-dependance-aux-jeux-video/"><div class="thumbnail-container animate-lazy size-715 "><img width="120" height="86" src="https://mycamer.net/wp-content/themes/jnews/assets/img/jeg-empty.png" class="attachment-jnews-120x86 size-jnews-120x86 lazyload wp-post-image" alt="Comment vaincre une dépendance aux jeux vidéo" decoding="async" loading="lazy" sizes="(max-width: 120px) 100vw, 120px" data-src="https://mycamer.net/wp-content/uploads/2021/05/iStock-986395750-2-1-120x86.jpg" data-srcset="https://mycamer.net/wp-content/uploads/2021/05/iStock-986395750-2-1-120x86.jpg 120w, https://mycamer.net/wp-content/uploads/2021/05/iStock-986395750-2-1-350x250.jpg 350w, https://mycamer.net/wp-content/uploads/2021/05/iStock-986395750-2-1-750x536.jpg 750w, https://mycamer.net/wp-content/uploads/2021/05/iStock-986395750-2-1-1140x815.jpg 1140w" data-sizes="auto" data-expand="700" /></div></a> </div> <div class="jeg_postblock_content"> <h3 class="jeg_post_title"> <a href="https://mycamer.net/comment-vaincre-une-dependance-aux-jeux-video/">Comment vaincre une dépendance aux jeux vidéo</a> </h3> <div class="jeg_post_meta"><div class="jeg_meta_date"><a href="https://mycamer.net/comment-vaincre-une-dependance-aux-jeux-video/" ><i class="fa fa-clock-o"></i> mai 22, 2021</a></div></div> </div> </article></div> <div class='module-overlay'> <div class='preloader_type preloader_dot'> <div class="module-preloader jeg_preloader dot"> <span></span><span></span><span></span> </div> <div class="module-preloader jeg_preloader circle"> <div class="jnews_preloader_circle_outer"> <div class="jnews_preloader_circle_inner"></div> </div> </div> <div class="module-preloader jeg_preloader square"> <div class="jeg_square"> <div class="jeg_square_inner"></div> </div> </div> </div> </div> </div> <div class="jeg_block_navigation"> <div class='navigation_overlay'><div class='module-preloader jeg_preloader'><span></span><span></span><span></span></div></div> </div> <script>var jnews_module_232_0_6476338901ec1 = {"header_icon":"","first_title":"Recommended","second_title":".","url":"","header_type":"heading_5","header_background":"","header_secondary_background":"","header_text_color":"","header_line_color":"","header_accent_color":"","header_filter_category":"","header_filter_author":"","header_filter_tag":"","header_filter_text":"All","post_type":"post","content_type":"all","sponsor":false,"number_post":"2","post_offset":"0","unique_content":"unique2","include_post":"","included_only":false,"exclude_post":"","include_category":"","exclude_category":"11521","include_author":"","include_tag":"","exclude_tag":"","product_cat":"","product_tag":"","post_tag":"","news-category":"","sort_by":"random","date_format":"default","date_format_custom":"Y\/m\/d","force_normal_image_load":"","pagination_mode":"disable","pagination_nextprev_showtext":"","pagination_number_post":"6","pagination_scroll_limit":"0","boxed":"","boxed_shadow":"","el_id":"","el_class":"","scheme":"","column_width":"auto","title_color":"","accent_color":"","alt_color":"","excerpt_color":"","css":"","paged":1,"column_class":"jeg_col_1o3","class":"jnews_block_21"};</script> </div></div><!-- MagenetMonetization 5 --><div class="widget widget_jnews_module_element_ads" id="jnews_module_element_ads-3"><div class='jeg_ad jeg_ad_module jnews_module_232_1_6476338922d81 '><div class='ads-wrapper'><div class=""> <style type='text/css' scoped> .adsslot_3HpbWXCtm2{ width:300px !important; height:250px !important; } @media (max-width:1199px) { .adsslot_3HpbWXCtm2{ width:300px !important; height:250px !important; } } @media (max-width:767px) { .adsslot_3HpbWXCtm2{ width:300px !important; height:250px !important; } } </style> <ins class="adsbygoogle adsslot_3HpbWXCtm2" style="display:inline-block;" data-ad-client="ca-pub-1560061249950980" data-ad-slot="7740513747"></ins> <script async defer src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div></div></div></div><!-- MagenetMonetization 5 --><div class="widget widget_mc4wp_form_widget" id="mc4wp_form_widget-1"><div class="jeg_block_heading jeg_block_heading_5 jnews_6476338922ea3"><h3 class="jeg_block_title"><span>Subscribe<strong>.</strong></span></h3></div></div><!-- MagenetMonetization 5 --><div class="widget widget_jnews_module_block_21" id="jnews_module_block_21-2"><div class="jeg_postblock_21 jeg_postblock jeg_module_hook jeg_pagination_disable jeg_col_1o3 jnews_module_232_2_64763389244cf " data-unique="jnews_module_232_2_64763389244cf"> <div class="jeg_block_heading jeg_block_heading_5 jeg_subcat_right"> <h3 class="jeg_block_title"><span>Trending<strong>.</strong></span></h3> </div> <div class="jeg_block_container"> <div class="jeg_posts jeg_load_more_flag"><article class="jeg_post jeg_pl_sm format-standard"> <div class="jeg_thumb"> <a href="https://mycamer.net/erreur-c14a-du-code-dassistance-snapchat-comment-y-remedier/"><div class="thumbnail-container animate-lazy size-715 "><img width="120" height="86" src="https://mycamer.net/wp-content/themes/jnews/assets/img/jeg-empty.png" class="attachment-jnews-120x86 size-jnews-120x86 lazyload wp-post-image" alt="Erreur C14a du code d’assistance Snapchat : comment y remédier ?" decoding="async" loading="lazy" sizes="(max-width: 120px) 100vw, 120px" data-src="https://mycamer.net/wp-content/uploads/2022/08/Snapchat-c14a-error-120x86.jpg" data-srcset="https://mycamer.net/wp-content/uploads/2022/08/Snapchat-c14a-error-120x86.jpg 120w, https://mycamer.net/wp-content/uploads/2022/08/Snapchat-c14a-error-350x250.jpg 350w, https://mycamer.net/wp-content/uploads/2022/08/Snapchat-c14a-error-750x536.jpg 750w" data-sizes="auto" data-expand="700" /></div></a> </div> <div class="jeg_postblock_content"> <h3 class="jeg_post_title"> <a href="https://mycamer.net/erreur-c14a-du-code-dassistance-snapchat-comment-y-remedier/">Erreur C14a du code d’assistance Snapchat : comment y remédier ?</a> </h3> <div class="jeg_post_meta"><div class="jeg_meta_date"><a href="https://mycamer.net/erreur-c14a-du-code-dassistance-snapchat-comment-y-remedier/" ><i class="fa fa-clock-o"></i> août 21, 2022</a></div></div> </div> </article><article class="jeg_post jeg_pl_sm format-standard"> <div class="jeg_thumb"> <a href="https://mycamer.net/10-problemes-courants-de-liphone-13-et-comment-les-resoudre/"><div class="thumbnail-container animate-lazy size-715 "><img width="120" height="86" src="https://mycamer.net/wp-content/themes/jnews/assets/img/jeg-empty.png" class="attachment-jnews-120x86 size-jnews-120x86 lazyload wp-post-image" alt="10 problèmes courants de l’iPhone 13 et comment les résoudre" decoding="async" loading="lazy" sizes="(max-width: 120px) 100vw, 120px" data-src="https://mycamer.net/wp-content/uploads/2021/09/iPhone-13-issues-1000x600-120x86.jpeg" data-srcset="https://mycamer.net/wp-content/uploads/2021/09/iPhone-13-issues-1000x600-120x86.jpeg 120w, https://mycamer.net/wp-content/uploads/2021/09/iPhone-13-issues-1000x600-350x250.jpeg 350w, https://mycamer.net/wp-content/uploads/2021/09/iPhone-13-issues-1000x600-750x536.jpeg 750w, https://mycamer.net/wp-content/uploads/2021/09/iPhone-13-issues-1000x600-1140x815.jpeg 1140w" data-sizes="auto" data-expand="700" /></div></a> </div> <div class="jeg_postblock_content"> <h3 class="jeg_post_title"> <a href="https://mycamer.net/10-problemes-courants-de-liphone-13-et-comment-les-resoudre/">10 problèmes courants de l’iPhone 13 et comment les résoudre</a> </h3> <div class="jeg_post_meta"><div class="jeg_meta_date"><a href="https://mycamer.net/10-problemes-courants-de-liphone-13-et-comment-les-resoudre/" ><i class="fa fa-clock-o"></i> décembre 24, 2021</a></div></div> </div> </article><article class="jeg_post jeg_pl_sm format-standard"> <div class="jeg_thumb"> <a href="https://mycamer.net/comment-installer-phpmyadmin-sur-debian-11-bullseye-apache/"><div class="thumbnail-container animate-lazy size-715 "><img width="120" height="86" src="https://mycamer.net/wp-content/themes/jnews/assets/img/jeg-empty.png" class="attachment-jnews-120x86 size-jnews-120x86 lazyload wp-post-image" alt="Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)" decoding="async" loading="lazy" sizes="(max-width: 120px) 100vw, 120px" data-src="https://mycamer.net/wp-content/uploads/2021/11/PHPMYADMIn-installation-on-Debian-11-Bullseye-120x86.png" data-srcset="https://mycamer.net/wp-content/uploads/2021/11/PHPMYADMIn-installation-on-Debian-11-Bullseye-120x86.png 120w, https://mycamer.net/wp-content/uploads/2021/11/PHPMYADMIn-installation-on-Debian-11-Bullseye-350x250.png 350w, https://mycamer.net/wp-content/uploads/2021/11/PHPMYADMIn-installation-on-Debian-11-Bullseye-750x536.png 750w" data-sizes="auto" data-expand="700" /></div></a> </div> <div class="jeg_postblock_content"> <h3 class="jeg_post_title"> <a href="https://mycamer.net/comment-installer-phpmyadmin-sur-debian-11-bullseye-apache/">Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)</a> </h3> <div class="jeg_post_meta"><div class="jeg_meta_date"><a href="https://mycamer.net/comment-installer-phpmyadmin-sur-debian-11-bullseye-apache/" ><i class="fa fa-clock-o"></i> novembre 25, 2021</a></div></div> </div> </article><article class="jeg_post jeg_pl_sm format-standard"> <div class="jeg_thumb"> <a href="https://mycamer.net/avantages-et-inconvenients-des-concepteurs-et-createurs-de-jeux-video/"><div class="thumbnail-container animate-lazy size-715 "><img width="120" height="86" src="https://mycamer.net/wp-content/themes/jnews/assets/img/jeg-empty.png" class="attachment-jnews-120x86 size-jnews-120x86 lazyload wp-post-image" alt="Avantages et inconvénients des concepteurs et créateurs de jeux vidéo" decoding="async" loading="lazy" sizes="(max-width: 120px) 100vw, 120px" data-src="https://mycamer.net/wp-content/uploads/2021/09/Advantages-Disadvantages-About-Video-Game-Designers-and-Creators-120x86.jpg" data-srcset="https://mycamer.net/wp-content/uploads/2021/09/Advantages-Disadvantages-About-Video-Game-Designers-and-Creators-120x86.jpg 120w, https://mycamer.net/wp-content/uploads/2021/09/Advantages-Disadvantages-About-Video-Game-Designers-and-Creators-350x250.jpg 350w, https://mycamer.net/wp-content/uploads/2021/09/Advantages-Disadvantages-About-Video-Game-Designers-and-Creators-750x536.jpg 750w, https://mycamer.net/wp-content/uploads/2021/09/Advantages-Disadvantages-About-Video-Game-Designers-and-Creators-1140x815.jpg 1140w" data-sizes="auto" data-expand="700" /></div></a> </div> <div class="jeg_postblock_content"> <h3 class="jeg_post_title"> <a href="https://mycamer.net/avantages-et-inconvenients-des-concepteurs-et-createurs-de-jeux-video/">Avantages et inconvénients des concepteurs et créateurs de jeux vidéo</a> </h3> <div class="jeg_post_meta"><div class="jeg_meta_date"><a href="https://mycamer.net/avantages-et-inconvenients-des-concepteurs-et-createurs-de-jeux-video/" ><i class="fa fa-clock-o"></i> septembre 17, 2021</a></div></div> </div> </article><article class="jeg_post jeg_pl_sm format-standard"> <div class="jeg_thumb"> <a href="https://mycamer.net/comment-reparer-le-decalage-dinstagram-sur-iphone-et-android/"><div class="thumbnail-container animate-lazy size-715 "><img width="120" height="86" src="https://mycamer.net/wp-content/themes/jnews/assets/img/jeg-empty.png" class="attachment-jnews-120x86 size-jnews-120x86 lazyload wp-post-image" alt="Comment réparer le décalage d’Instagram sur iPhone et Android" decoding="async" loading="lazy" sizes="(max-width: 120px) 100vw, 120px" data-src="https://mycamer.net/wp-content/uploads/2021/11/How-to-Fix-Instagram-Lag-on-iPhone-and-Android-120x86.jpg" data-srcset="https://mycamer.net/wp-content/uploads/2021/11/How-to-Fix-Instagram-Lag-on-iPhone-and-Android-120x86.jpg 120w, https://mycamer.net/wp-content/uploads/2021/11/How-to-Fix-Instagram-Lag-on-iPhone-and-Android-350x250.jpg 350w, https://mycamer.net/wp-content/uploads/2021/11/How-to-Fix-Instagram-Lag-on-iPhone-and-Android-750x536.jpg 750w, https://mycamer.net/wp-content/uploads/2021/11/How-to-Fix-Instagram-Lag-on-iPhone-and-Android-1136x815.jpg 1136w" data-sizes="auto" data-expand="700" /></div></a> </div> <div class="jeg_postblock_content"> <h3 class="jeg_post_title"> <a href="https://mycamer.net/comment-reparer-le-decalage-dinstagram-sur-iphone-et-android/">Comment réparer le décalage d’Instagram sur iPhone et Android</a> </h3> <div class="jeg_post_meta"><div class="jeg_meta_date"><a href="https://mycamer.net/comment-reparer-le-decalage-dinstagram-sur-iphone-et-android/" ><i class="fa fa-clock-o"></i> novembre 26, 2021</a></div></div> </div> </article></div> <div class='module-overlay'> <div class='preloader_type preloader_dot'> <div class="module-preloader jeg_preloader dot"> <span></span><span></span><span></span> </div> <div class="module-preloader jeg_preloader circle"> <div class="jnews_preloader_circle_outer"> <div class="jnews_preloader_circle_inner"></div> </div> </div> <div class="module-preloader jeg_preloader square"> <div class="jeg_square"> <div class="jeg_square_inner"></div> </div> </div> </div> </div> </div> <div class="jeg_block_navigation"> <div class='navigation_overlay'><div class='module-preloader jeg_preloader'><span></span><span></span><span></span></div></div> </div> <script>var jnews_module_232_2_64763389244cf = {"header_icon":"","first_title":"Trending","second_title":".","url":"","header_type":"heading_5","header_background":"","header_secondary_background":"","header_text_color":"","header_line_color":"","header_accent_color":"","header_filter_category":"","header_filter_author":"","header_filter_tag":"","header_filter_text":"All","post_type":"post","content_type":"all","sponsor":false,"number_post":"5","post_offset":"0","unique_content":"unique2","include_post":"","included_only":false,"exclude_post":"21752,3358","include_category":"","exclude_category":"11521","include_author":"","include_tag":"","exclude_tag":"","product_cat":"","product_tag":"","post_tag":"","news-category":"","sort_by":"popular_post_month","date_format":"default","date_format_custom":"Y\/m\/d","force_normal_image_load":"","pagination_mode":"disable","pagination_nextprev_showtext":"","pagination_number_post":"6","pagination_scroll_limit":"0","boxed":"","boxed_shadow":"","el_id":"","el_class":"","scheme":"","column_width":"auto","title_color":"","accent_color":"","alt_color":"","excerpt_color":"","css":"","paged":1,"column_class":"jeg_col_1o3","class":"jnews_block_21"};</script> </div></div><!-- MagenetMonetization 5 --><div class="widget woocommerce widget_product_categories" id="woocommerce_product_categories-2"><div class="jeg_block_heading jeg_block_heading_6 jnews_647633892b430"><h3 class="jeg_block_title"><span>Catégories de produits</span></h3></div><ul class="product-categories"><li class="cat-item cat-item-5773"><a href="https://mycamer.net/categorie-produit/non-classe/">Non classé</a> <span class="count">(2)</span></li> </ul></div></div></div></div> </div> <div class="jeg_ad jeg_article jnews_article_bottom_ads"> <div class='ads-wrapper '></div> </div> </div> </div> </div> </div> <div id="post-body-class" class="post-template-default single single-post postid-232 single-format-standard wp-embed-responsive theme-jnews woocommerce-demo-store woocommerce-no-js jeg_toggle_light jeg_single_tpl_1 jnews jsc_normal wpb-js-composer js-comp-ver-6.10.0 vc_responsive"></div> </div> <div class="post-ajax-overlay"> <div class="preloader_type preloader_dot"> <div class="newsfeed_preloader jeg_preloader dot"> <span></span><span></span><span></span> </div> <div class="newsfeed_preloader jeg_preloader circle"> <div class="jnews_preloader_circle_outer"> <div class="jnews_preloader_circle_inner"></div> </div> </div> <div class="newsfeed_preloader jeg_preloader square"> <div class="jeg_square"><div class="jeg_square_inner"></div></div> </div> </div> </div> </div> <!-- wmm d --> <div class="footer-holder" id="footer" data-id="footer"> <div class="jeg_footer jeg_footer_3 normal"> <div class="jeg_footer_container jeg_container"> <div class="jeg_footer_content"> <div class="container"> <div class="row"> <div class="jeg_footer_primary clearfix"> <div class="col-md-3 footer_column"> <!-- MagenetMonetization 5 --><div class="footer_widget widget_jnews_about" id="jnews_about-1"> <div class="jeg_about "> <a class="footer_logo" href="https://mycamer.net/"> <img class='lazyload' src="https://mycamer.net/wp-content/themes/jnews/assets/img/jeg-empty.png" data-src="https://mycamer.net/wp-content/uploads/2023/03/footer_logo.png" data-srcset="https://mycamer.net/wp-content/uploads/2023/03/footer_logo.png 1x, https://mycamer.net/wp-content/uploads/2023/03/footer_logo@2x.png 2x" alt="Technique de pointe" data-light-src="https://mycamer.net/wp-content/uploads/2023/03/footer_logo.png" data-light-srcset="https://mycamer.net/wp-content/uploads/2023/03/footer_logo.png 1x, https://mycamer.net/wp-content/uploads/2023/03/footer_logo@2x.png 2x" data-dark-src="https://mycamer.net/wp-content/themes/jnews/assets/img/logo_darkmode.png" data-dark-srcset="https://mycamer.net/wp-content/themes/jnews/assets/img/logo_darkmode.png 1x, https://mycamer.net/wp-content/themes/jnews/assets/img/logo_darkmode@2x.png 2x" data-pin-no-hover="true"> </a> <p>We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Check our landing page for details.</p> </div> </div><!-- MagenetMonetization 5 --><div class="footer_widget widget_jnews_social" id="jnews_social-1"> <div class="jeg_social_wrap "> <p> <strong>Follow Us</strong> </p> <div class="socials_widget square"> <a href="https://www.facebook.com/jegtheme/" target="_blank" rel="external noopener nofollow" class="jeg_facebook"> <i class="fa fa-facebook"></i> </a><a href="https://twitter.com/jegtheme" target="_blank" rel="external noopener nofollow" class="jeg_twitter"> <i class="fa fa-twitter"></i> </a><a href="https://www.instagram.com/jegtheme/" target="_blank" rel="external noopener nofollow" class="jeg_instagram"> <i class="fa fa-instagram"></i> </a><a href="https://www.behance.net/jegtheme" target="_blank" rel="external noopener nofollow" class="jeg_behance"> <i class="fa fa-behance"></i> </a> </div> <style scoped></style> </div> </div> </div> <div class="col-md-3 footer_column"> <!-- MagenetMonetization 5 --><div class="footer_widget widget_categories" id="categories-4"><div class="jeg_footer_heading jeg_footer_heading_1"><h3 class="jeg_footer_title"><span>Catégories</span></h3></div> <ul> <li class="cat-item cat-item-1"><a href="https://mycamer.net/news/generale/">Générale</a> </li> <li class="cat-item cat-item-11526"><a href="https://mycamer.net/news/programmation-web/html5-css3/">HTML5 / CSS3</a> </li> <li class="cat-item cat-item-11524"><a href="https://mycamer.net/news/programmation-web/javascript/">JavaScript</a> </li> <li class="cat-item cat-item-11519"><a href="https://mycamer.net/news/jeux-video/">JEUX VIDEO</a> </li> <li class="cat-item cat-item-11516"><a href="https://mycamer.net/news/microsoft/">Microsoft</a> </li> <li class="cat-item cat-item-11518"><a href="https://mycamer.net/news/mobiles/">MOBILES</a> </li> <li class="cat-item cat-item-11517"><a href="https://mycamer.net/news/photography/">Photography</a> </li> <li class="cat-item cat-item-11525"><a href="https://mycamer.net/news/programmation-web/php-mysql/">PHP / MySql</a> </li> <li class="cat-item cat-item-587"><a href="https://mycamer.net/news/portrait/">portrait</a> </li> <li class="cat-item cat-item-11522"><a href="https://mycamer.net/news/programmation-web/">PROGRAMMATION WEB</a> </li> <li class="cat-item cat-item-11523"><a href="https://mycamer.net/news/programmation-web/python/">Python</a> </li> <li class="cat-item cat-item-11521"><a href="https://mycamer.net/news/review/">Review</a> </li> <li class="cat-item cat-item-11520"><a href="https://mycamer.net/news/security/">Security</a> </li> <li class="cat-item cat-item-11515"><a href="https://mycamer.net/news/technologies/">TECHNOLOGIES</a> </li> </ul> </div> </div> <div class="col-md-3 footer_column"> <!-- MagenetMonetization 5 --><div class="footer_widget widget_tag_cloud" id="tag_cloud-1"><div class="jeg_footer_heading jeg_footer_heading_1"><h3 class="jeg_footer_title"><span>Étiquettes</span></h3></div><div class="tagcloud"><a href="https://mycamer.net/tag/actualites-industrielles/" class="tag-cloud-link tag-link-442 tag-link-position-1" style="font-size: 8pt;" aria-label="actualités industrielles (34 éléments)">actualités industrielles</a> <a href="https://mycamer.net/tag/actualite-economique/" class="tag-cloud-link tag-link-458 tag-link-position-2" style="font-size: 8.5833333333333pt;" aria-label="actualité économique (36 éléments)">actualité économique</a> <a href="https://mycamer.net/tag/affaires/" class="tag-cloud-link tag-link-601 tag-link-position-3" style="font-size: 8pt;" aria-label="affaires (34 éléments)">affaires</a> <a href="https://mycamer.net/tag/ailette/" class="tag-cloud-link tag-link-41 tag-link-position-4" style="font-size: 9.9444444444444pt;" aria-label="ailette (43 éléments)">ailette</a> <a href="https://mycamer.net/tag/amers/" class="tag-cloud-link tag-link-1097 tag-link-position-5" style="font-size: 13.25pt;" aria-label="AMERS (64 éléments)">AMERS</a> <a href="https://mycamer.net/tag/asie/" class="tag-cloud-link tag-link-1447 tag-link-position-6" style="font-size: 10.333333333333pt;" aria-label="ASIE (45 éléments)">ASIE</a> <a href="https://mycamer.net/tag/asxpac/" class="tag-cloud-link tag-link-1446 tag-link-position-7" style="font-size: 8.5833333333333pt;" aria-label="ASXPAC (36 éléments)">ASXPAC</a> <a href="https://mycamer.net/tag/bact/" class="tag-cloud-link tag-link-1065 tag-link-position-8" style="font-size: 9.9444444444444pt;" aria-label="BACT (43 éléments)">BACT</a> <a href="https://mycamer.net/tag/cmpny/" class="tag-cloud-link tag-link-1072 tag-link-position-9" style="font-size: 14.222222222222pt;" aria-label="CMPNY (71 éléments)">CMPNY</a> <a href="https://mycamer.net/tag/commerce/" class="tag-cloud-link tag-link-49 tag-link-position-10" style="font-size: 10.916666666667pt;" aria-label="Commerce (48 éléments)">Commerce</a> <a href="https://mycamer.net/tag/courrier-quotidien/" class="tag-cloud-link tag-link-584 tag-link-position-11" style="font-size: 8.5833333333333pt;" aria-label="courrier quotidien (36 éléments)">courrier quotidien</a> <a href="https://mycamer.net/tag/cycs/" class="tag-cloud-link tag-link-1725 tag-link-position-12" style="font-size: 8.7777777777778pt;" aria-label="CYCS (37 éléments)">CYCS</a> <a href="https://mycamer.net/tag/cycs08/" class="tag-cloud-link tag-link-1726 tag-link-position-13" style="font-size: 8.7777777777778pt;" aria-label="CYCS08 (37 éléments)">CYCS08</a> <a href="https://mycamer.net/tag/des-sports/" class="tag-cloud-link tag-link-352 tag-link-position-14" style="font-size: 10.722222222222pt;" aria-label="des sports (47 éléments)">des sports</a> <a href="https://mycamer.net/tag/divertissement/" class="tag-cloud-link tag-link-242 tag-link-position-15" style="font-size: 11.305555555556pt;" aria-label="Divertissement (50 éléments)">Divertissement</a> <a href="https://mycamer.net/tag/emrg/" class="tag-cloud-link tag-link-1753 tag-link-position-16" style="font-size: 8.3888888888889pt;" aria-label="EMRG (35 éléments)">EMRG</a> <a href="https://mycamer.net/tag/entreprise/" class="tag-cloud-link tag-link-56 tag-link-position-17" style="font-size: 15.583333333333pt;" aria-label="Entreprise (84 éléments)">Entreprise</a> <a href="https://mycamer.net/tag/gen/" class="tag-cloud-link tag-link-1079 tag-link-position-18" style="font-size: 13.444444444444pt;" aria-label="GEN (65 éléments)">GEN</a> <a href="https://mycamer.net/tag/google/" class="tag-cloud-link tag-link-578 tag-link-position-19" style="font-size: 8.3888888888889pt;" aria-label="Google (35 éléments)">Google</a> <a href="https://mycamer.net/tag/intelligence-artificielle/" class="tag-cloud-link tag-link-662 tag-link-position-20" style="font-size: 8pt;" aria-label="intelligence artificielle (34 éléments)">intelligence artificielle</a> <a href="https://mycamer.net/tag/itse/" class="tag-cloud-link tag-link-1830 tag-link-position-21" style="font-size: 8pt;" aria-label="ITSE (34 éléments)">ITSE</a> <a href="https://mycamer.net/tag/itse08/" class="tag-cloud-link tag-link-1831 tag-link-position-22" style="font-size: 8pt;" aria-label="ITSE08 (34 éléments)">ITSE08</a> <a href="https://mycamer.net/tag/jeu-video/" class="tag-cloud-link tag-link-134 tag-link-position-23" style="font-size: 9.5555555555556pt;" aria-label="jeu vidéo (41 éléments)">jeu vidéo</a> <a href="https://mycamer.net/tag/jeux-video/" class="tag-cloud-link tag-link-203 tag-link-position-24" style="font-size: 16.75pt;" aria-label="jeux vidéo (97 éléments)">jeux vidéo</a> <a href="https://mycamer.net/tag/kotaku/" class="tag-cloud-link tag-link-322 tag-link-position-25" style="font-size: 8.3888888888889pt;" aria-label="Kotaku (35 éléments)">Kotaku</a> <a href="https://mycamer.net/tag/linformatique/" class="tag-cloud-link tag-link-1176 tag-link-position-26" style="font-size: 8.7777777777778pt;" aria-label="l'informatique (37 éléments)">l'informatique</a> <a href="https://mycamer.net/tag/linternet/" class="tag-cloud-link tag-link-353 tag-link-position-27" style="font-size: 11.5pt;" aria-label="l'Internet (52 éléments)">l'Internet</a> <a href="https://mycamer.net/tag/la-technologie/" class="tag-cloud-link tag-link-38 tag-link-position-28" style="font-size: 22pt;" aria-label="La technologie (179 éléments)">La technologie</a> <a href="https://mycamer.net/tag/logiciel/" class="tag-cloud-link tag-link-569 tag-link-position-29" style="font-size: 11.5pt;" aria-label="Logiciel (51 éléments)">Logiciel</a> <a href="https://mycamer.net/tag/microsoft/" class="tag-cloud-link tag-link-577 tag-link-position-30" style="font-size: 8.3888888888889pt;" aria-label="Microsoft (35 éléments)">Microsoft</a> <a href="https://mycamer.net/tag/mtpix/" class="tag-cloud-link tag-link-1817 tag-link-position-31" style="font-size: 9.9444444444444pt;" aria-label="MTPIX (43 éléments)">MTPIX</a> <a href="https://mycamer.net/tag/nom/" class="tag-cloud-link tag-link-2355 tag-link-position-32" style="font-size: 12.666666666667pt;" aria-label="NOM (59 éléments)">NOM</a> <a href="https://mycamer.net/tag/nous/" class="tag-cloud-link tag-link-1098 tag-link-position-33" style="font-size: 14.805555555556pt;" aria-label="nous (76 éléments)">nous</a> <a href="https://mycamer.net/tag/nouvelles/" class="tag-cloud-link tag-link-31 tag-link-position-34" style="font-size: 21.416666666667pt;" aria-label="nouvelles (168 éléments)">nouvelles</a> <a href="https://mycamer.net/tag/politique/" class="tag-cloud-link tag-link-354 tag-link-position-35" style="font-size: 13.444444444444pt;" aria-label="politique (65 éléments)">politique</a> <a href="https://mycamer.net/tag/sofw/" class="tag-cloud-link tag-link-1089 tag-link-position-36" style="font-size: 8pt;" aria-label="SOFW (34 éléments)">SOFW</a> <a href="https://mycamer.net/tag/swit/" class="tag-cloud-link tag-link-1090 tag-link-position-37" style="font-size: 11.111111111111pt;" aria-label="SWIT (49 éléments)">SWIT</a> <a href="https://mycamer.net/tag/tech08/" class="tag-cloud-link tag-link-1091 tag-link-position-38" style="font-size: 14.611111111111pt;" aria-label="TECH08 (75 éléments)">TECH08</a> <a href="https://mycamer.net/tag/technologie/" class="tag-cloud-link tag-link-42 tag-link-position-39" style="font-size: 21.222222222222pt;" aria-label="technologie (165 éléments)">technologie</a> <a href="https://mycamer.net/tag/tmt/" class="tag-cloud-link tag-link-1094 tag-link-position-40" style="font-size: 14.805555555556pt;" aria-label="TMT (76 éléments)">TMT</a> <a href="https://mycamer.net/tag/topcmb/" class="tag-cloud-link tag-link-1448 tag-link-position-41" style="font-size: 10.333333333333pt;" aria-label="TOPCMB (45 éléments)">TOPCMB</a> <a href="https://mycamer.net/tag/topnws/" class="tag-cloud-link tag-link-1449 tag-link-position-42" style="font-size: 13.25pt;" aria-label="TOPNWS (64 éléments)">TOPNWS</a> <a href="https://mycamer.net/tag/types-de-contenu/" class="tag-cloud-link tag-link-1038 tag-link-position-43" style="font-size: 8pt;" aria-label="Types de contenu (34 éléments)">Types de contenu</a> <a href="https://mycamer.net/tag/education/" class="tag-cloud-link tag-link-449 tag-link-position-44" style="font-size: 9.5555555555556pt;" aria-label="Éducation (41 éléments)">Éducation</a> <a href="https://mycamer.net/tag/economie/" class="tag-cloud-link tag-link-1025 tag-link-position-45" style="font-size: 11.111111111111pt;" aria-label="économie (49 éléments)">économie</a></div> </div> </div> <div class="col-md-3 footer_column"> <!-- MagenetMonetization 5 --><div class="footer_widget widget_jnews_recent_news" id="jnews_recent_news-2"><div class="jeg_footer_heading jeg_footer_heading_1"><h3 class="jeg_footer_title"><span>Recent News</span></h3></div> <div class="jeg_postblock"> <div class="jeg_post jeg_pl_sm post-31254 post type-post status-publish format-standard has-post-thumbnail hentry category-jeux-video tag-cdpr tag-cyberpunk tag-le-sorceleur-3"> <div class="jeg_thumb"> <a href="https://mycamer.net/the-witcher-3-est-devenu-le-9e-ou-3e-jeu-le-plus-vendu-de-lhistoire/"> <div class="thumbnail-container animate-lazy size-715 "><img width="120" height="86" src="https://mycamer.net/wp-content/themes/jnews/assets/img/jeg-empty.png" class="attachment-jnews-120x86 size-jnews-120x86 lazyload wp-post-image" alt="“The Witcher 3” est devenu le 9e (ou 3e) jeu le plus vendu de l’histoire" decoding="async" loading="lazy" sizes="(max-width: 120px) 100vw, 120px" data-src="https://mycamer.net/wp-content/uploads/2023/05/1685452545_0x0-120x86.jpg" data-srcset="https://mycamer.net/wp-content/uploads/2023/05/1685452545_0x0-120x86.jpg 120w, https://mycamer.net/wp-content/uploads/2023/05/1685452545_0x0-350x250.jpg 350w, https://mycamer.net/wp-content/uploads/2023/05/1685452545_0x0-750x536.jpg 750w" data-sizes="auto" data-expand="700" /></div> </a> </div> <div class="jeg_postblock_content"> <h3 property="headline" class="jeg_post_title"><a property="url" href="https://mycamer.net/the-witcher-3-est-devenu-le-9e-ou-3e-jeu-le-plus-vendu-de-lhistoire/">“The Witcher 3” est devenu le 9e (ou 3e) jeu le plus vendu de l’histoire</a></h3> <div class="jeg_post_meta"> <div property="datePublished" class="jeg_meta_date"><i class="fa fa-clock-o"></i> mai 30, 2023</div> </div> </div> </div> <div class="jeg_post jeg_pl_sm post-31252 post type-post status-publish format-standard has-post-thumbnail hentry category-programmation-web"> <div class="jeg_thumb"> <a href="https://mycamer.net/restaurant-theme-wordpress-pour-restaurant/"> <div class="thumbnail-container animate-lazy size-715 "><img width="120" height="86" src="https://mycamer.net/wp-content/themes/jnews/assets/img/jeg-empty.png" class="attachment-jnews-120x86 size-jnews-120x86 lazyload wp-post-image" alt="Restaurant – Thème WordPress pour restaurant" decoding="async" loading="lazy" sizes="(max-width: 120px) 100vw, 120px" data-src="https://mycamer.net/wp-content/uploads/2023/05/1685431778_01_preview.__large_preview-120x86.png" data-srcset="https://mycamer.net/wp-content/uploads/2023/05/1685431778_01_preview.__large_preview-120x86.png 120w, https://mycamer.net/wp-content/uploads/2023/05/1685431778_01_preview.__large_preview-350x250.png 350w" data-sizes="auto" data-expand="700" /></div> </a> </div> <div class="jeg_postblock_content"> <h3 property="headline" class="jeg_post_title"><a property="url" href="https://mycamer.net/restaurant-theme-wordpress-pour-restaurant/">Restaurant – Thème WordPress pour restaurant</a></h3> <div class="jeg_post_meta"> <div property="datePublished" class="jeg_meta_date"><i class="fa fa-clock-o"></i> mai 30, 2023</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="jeg_footer_bottom clearfix"> <div class="container"> <!-- secondary footer right --> <div class="footer_right"> <ul class="jeg_menu_footer"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28400"><a href="#">About</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28401"><a href="#">Advertise</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28402"><a href="#">Privacy & Policy</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28403"><a href="#">Contact</a></li> </ul> </div> <!-- secondary footer left --> <p class="copyright"> © 2023 <a href="http://jegtheme.com" title="Premium WordPress news & magazine theme">JNews</a> - Premium WordPress news & magazine theme by <a href="http://jegtheme.com" title="Jegtheme">Jegtheme</a>. </p> </div> </div> </div> </div><!-- /.footer --> </div> <div class="jscroll-to-top"> <a href="#back-to-top" class="jscroll-to-top_link"><i class="fa fa-angle-up"></i></a> </div> </div> <!-- Mobile Navigation ============================================= --> <div id="jeg_off_canvas" class="normal"> <a href="#" class="jeg_menu_close"><i class="jegicon-cross"></i></a> <div class="jeg_bg_overlay"></div> <div class="jeg_mobile_wrapper"> <div class="nav_wrap"> <div class="item_main"> <!-- Search Form --> <div class="jeg_aside_item jeg_search_wrapper jeg_search_no_expand square"> <a href="#" class="jeg_search_toggle"><i class="fa fa-search"></i></a> <form action="https://mycamer.net/" method="get" class="jeg_search_form" target="_top"> <input name="s" class="jeg_search_input" placeholder="Search..." type="text" value="" autocomplete="off"> <button aria-label="Search Button" type="submit" class="jeg_search_button btn"><i class="fa fa-search"></i></button> </form> <!-- jeg_search_hide with_result no_result --> <div class="jeg_search_result jeg_search_hide with_result"> <div class="search-result-wrapper"> </div> <div class="search-link search-noresult"> No Result </div> <div class="search-link search-all-button"> <i class="fa fa-search"></i> View All Result </div> </div></div><div class="jeg_aside_item"> <ul class="jeg_mobile_menu sf-js-hover"><li id="menu-item-28404" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28404"><a href="https://mycamer.net/home-1/">Accueil</a></li> <li id="menu-item-28408" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-28408"><a href="https://mycamer.net/news/technologies/">TECHNOLOGIES</a></li> <li id="menu-item-30816" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-30816"><a href="https://mycamer.net/news/portrait/">PORTRAIT</a></li> <li id="menu-item-28409" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-28409"><a href="https://mycamer.net/news/jeux-video/">JEUX VIDEO</a></li> <li id="menu-item-30812" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-30812"><a href="https://mycamer.net/news/programmation-web/">TUTORIELS</a></li> <li id="menu-item-28407" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-28407"><a href="https://mycamer.net/news/mobiles/">MOBILES</a></li> <li id="menu-item-30813" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30813"><a href="https://mycamer.net/nous-contacter/">Nous Contacter</a></li> </ul></div> </div> <div class="item_bottom"> <div class="jeg_aside_item socials_widget nobg"> <a href="http://facebook.com" target='_blank' rel='external noopener nofollow' class="jeg_facebook"><i class="fa fa-facebook"></i> </a><a href="http://twitter.com" target='_blank' rel='external noopener nofollow' class="jeg_twitter"><i class="fa fa-twitter"></i> </a><a href="http://pinterest.com" target='_blank' rel='external noopener nofollow' class="jeg_pinterest"><i class="fa fa-pinterest"></i> </a><a href="#" target='_blank' rel='external noopener nofollow' class="jeg_vk"><i class="fa fa-vk"></i> </a><a href="#" target='_blank' rel='external noopener nofollow' class="jeg_rss"><i class="fa fa-rss"></i> </a></div><div class="jeg_aside_item jeg_aside_copyright"> <p>© 2023 <a href="http://jegtheme.com" title="Premium WordPress news & magazine theme">JNews</a> - Premium WordPress news & magazine theme by <a href="http://jegtheme.com" title="Jegtheme">Jegtheme</a>.</p> </div> </div> </div> </div> </div><!-- Login Popup Content --> <div id="jeg_loginform" class="jeg_popup mfp-with-anim mfp-hide"> <div class="jeg_popupform jeg_popup_account"> <form action="#" data-type="login" method="post" accept-charset="utf-8"> <h3>Welcome Back!</h3><div class="social-login-wrapper login normal"> <div class="social-login-item"> <a href="" class="btn btn-facebook"> <i class="fa fa-facebook"></i> <span>Sign In with Facebook</span> </a> </div><div class="social-login-item"> <a href="" class="btn btn-google"> <i class="fa fa-google"></i> <span>Sign In with Google</span> </a> </div><div class="social-login-item"> <a href="" class="btn btn-linkedin"> <i class="fa fa-linkedin"></i> <span>Sign In with Linked In</span> </a> </div> <div class="social-login-line"> <span>OR</span> </div> </div> <p>Login to your account below</p> <!-- Form Messages --> <div class="form-message"></div> <p class="input_field"> <input type="text" name="username" placeholder="Username" value=""> </p> <p class="input_field"> <input type="password" name="password" placeholder="Password" value=""> </p> <p class="input_field remember_me"> <input type="checkbox" id="remember_me" name="remember_me" value="true"> <label for="remember_me">Remember Me</label> </p> <p class="submit"> <input type="hidden" name="action" value="login_handler"> <input type="hidden" name="jnews_nonce" value="ec324395ba"> <input type="submit" name="jeg_login_button" class="button" value="Log In" data-process="Processing . . ." data-string="Log In"> </p> <div class="bottom_links clearfix"> <a href="#jeg_forgotform" class="jeg_popuplink forgot">Forgotten Password?</a> </div> </form> </div> </div> <!-- Forgot Password Popup Content --> <div id="jeg_forgotform" class="jeg_popup mfp-with-anim mfp-hide"> <div class="jeg_popupform jeg_popup_account"> <form action="#" data-type="forgot" method="post" accept-charset="utf-8"> <h3>Retrieve your password</h3> <p>Please enter your username or email address to reset your password.</p> <!-- Form Messages --> <div class="form-message"></div> <p class="input_field"> <input type="text" name="user_login" placeholder="Your email or username" value=""> </p> <div class="g-recaptcha" data-sitekey=""></div> <p class="submit"> <input type="hidden" name="action" value="forget_password_handler"> <input type="hidden" name="jnews_nonce" value="ec324395ba"> <input type="submit" name="jeg_login_button" class="button" value="Reset Password" data-process="Processing . . ." data-string="Reset Password"> </p> <div class="bottom_links clearfix"> <a href="#jeg_loginform" class="jeg_popuplink"><i class="fa fa-lock"></i> Log In</a> </div> </form> </div> </div> <script type="text/javascript">var jfla = ["view_counter"]</script><div class="gtranslate_wrapper" id="gt-wrapper-13323729"></div><div id="jeg_playlist" class="jeg_popup create_playlist mfp-with-anim mfp-hide"> <div class="jeg_popupform jeg_popupform_playlist"> <form action="#" method="post" accept-charset="utf-8"> <h3>Add New Playlist</h3> <!-- Form Messages --> <div class="form-message"></div> <div class="form-group"> <p class="input_field"> <input type="text" name="title" placeholder="Playlist Name" value=""> </p> <p class="input_field"> <select name='visibility'><option disabled selected='selected' value=''>- Select Visibility -</option><option value='public' >Public</option><option value='private' >Private</option></select> </p> <!-- submit button --> <div class="submit"> <input type="hidden" name="type" value="create_playlist"> <input type="hidden" name="action" value="playlist_handler"> <input type="hidden" name="post_id" value=""> <input type="hidden" name="jnews-playlist-nonce" value="4ef50f616e"> <input type="submit" name="jeg_save_button" class="button" value="Save" data-process="Processing . . ." data-string="Save"> </div> </div> </form> </div> </div> <div id="notification_action_renderer" class="jeg_popup_container"> <div id="paper_toast"> <span id="label"></span> </div> </div> <p class="woocommerce-store-notice demo_store" data-notice-id="e02fbb77afc025c4083d4cc608db17b6" style="display:none;">Nous avons découvert un nouveau système qui génère des revenus 100% passifs... <a href="#" class="woocommerce-store-notice__dismiss-link">Ignorer</a></p><div id="selectShareContainer"> <div class="selectShare-inner"> <div class="select_share jeg_share_button"> <button class="select-share-button jeg_btn-facebook" data-url="http://www.facebook.com/sharer.php?u=[url]"e=[selected_text]" data-post-url="https%3A%2F%2Fmycamer.net%2Fcomment-valider-des-formulaires-avec-bootstrap-5%2F" data-image-url="" data-title="Comment%20valider%20des%20formulaires%20avec%20Bootstrap%205" ><i class="fa fa-facebook-official"></i></a><button class="select-share-button jeg_btn-twitter" data-url="https://twitter.com/intent/tweet?text=[selected_text]&url=[url]" data-post-url="https%3A%2F%2Fmycamer.net%2Fcomment-valider-des-formulaires-avec-bootstrap-5%2F" data-image-url="" data-title="Comment%20valider%20des%20formulaires%20avec%20Bootstrap%205%20via%20%40%40jegtheme" ><i class="fa fa-twitter"></i></a> </div> <div class="selectShare-arrowClip"> <div class="selectShare-arrow"></div> </div> </div> </div><div class="jeg_read_progress_wrapper"></div> <script type="text/javascript"> (function () { var c = document.body.className; c = c.replace(/woocommerce-no-js/, 'woocommerce-js'); document.body.className = c; })(); </script> <script type='text/javascript' src='https://mycamer.net/wp-includes/js/jquery/ui/core.min.js?ver=1.13.2' id='jquery-ui-core-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-includes/js/jquery/ui/mouse.min.js?ver=1.13.2' id='jquery-ui-mouse-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-includes/js/jquery/ui/sortable.min.js?ver=1.13.2' id='jquery-ui-sortable-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-frontend-submit/assets/js/frontend.js?ver=11.0.0' id='jnews-frontend-submit-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-auto-load-post/assets/js/jquery.autoload.js' id='jnews-autoload-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js?ver=2.1.4-wc.7.7.0' id='js-cookie-js'></script> <script type='text/javascript' id='woocommerce-js-extra'> /* <![CDATA[ */ var woocommerce_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%"}; /* ]]> */ </script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=7.7.0' id='woocommerce-js'></script> <script type='text/javascript' id='wc-cart-fragments-js-extra'> /* <![CDATA[ */ var wc_cart_fragments_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","cart_hash_key":"wc_cart_hash_8db7bc886637762752526bf464ad74db","fragment_name":"wc_fragments_8db7bc886637762752526bf464ad74db","request_timeout":"5000"}; /* ]]> */ </script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=7.7.0' id='wc-cart-fragments-js'></script> <script type='text/javascript' id='jnews-frontend-js-extra'> /* <![CDATA[ */ var jnewsoption = {"login_reload":"https:\/\/mycamer.net\/comment-valider-des-formulaires-avec-bootstrap-5","popup_script":"magnific","single_gallery":"","ismobile":"","isie":"","sidefeed_ajax":"","language":"fr_FR","module_prefix":"jnews_module_ajax_","live_search":"1","postid":"232","isblog":"1","admin_bar":"0","follow_video":"","follow_position":"top_right","rtl":"0","gif":"","lang":{"invalid_recaptcha":"Invalid Recaptcha!","empty_username":"Please enter your username!","empty_email":"Please enter your email!","empty_password":"Please enter your password!"},"recaptcha":"0","site_slug":"\/","site_domain":"mycamer.net","zoom_button":"0","autoload_limit":"10","autoload_content":""}; /* ]]> */ </script> <script type='text/javascript' src='https://mycamer.net/wp-content/themes/jnews/assets/dist/frontend.min.js?ver=11.0.5' id='jnews-frontend-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-split/assets/js/jquery.split.js' id='jnews-split-js'></script> <script type='text/javascript' id='mailchimp-woocommerce-js-extra'> /* <![CDATA[ */ var mailchimp_public_data = {"site_url":"https:\/\/mycamer.net","ajax_url":"https:\/\/mycamer.net\/wp-admin\/admin-ajax.php","disable_carts":"","subscribers_only":"","language":"fr","allowed_to_set_cookies":"1"}; /* ]]> */ </script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/mailchimp-for-woocommerce/public/js/mailchimp-woocommerce-public.min.js?ver=2.8.3.03' id='mailchimp-woocommerce-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-includes/js/comment-reply.min.js?ver=6.2.2' id='comment-reply-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-includes/js/hoverIntent.min.js?ver=1.10.2' id='hoverIntent-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-includes/js/imagesloaded.min.js?ver=4.1.4' id='imagesloaded-js'></script> <!--[if lt IE 9]> <script type='text/javascript' src='https://mycamer.net/wp-content/themes/jnews/assets/js/html5shiv.min.js?ver=11.0.5' id='html5shiv-js'></script> <![endif]--> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-video/assets/js/supposition.js?ver=11.0.1' id='supposition-js'></script> <script type='text/javascript' id='jnews-video-js-extra'> /* <![CDATA[ */ var jnewsvideo = {"user_playlist":[]}; /* ]]> */ </script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-video/assets/js/plugin.js?ver=11.0.1' id='jnews-video-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-like/assets/js/plugin.js?ver=11.0.0' id='jnews-like-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-social-login/assets/js/plugin.js?ver=11.0.1' id='jnews-social-login-style-js'></script> <script type='text/javascript' id='jnews-select-share-js-extra'> /* <![CDATA[ */ var jnews_select_share = {"is_customize_preview":""}; /* ]]> */ </script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-social-share/assets/js/plugin.js' id='jnews-select-share-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-weather/assets/js/plugin.js?ver=11.0.0' id='jnews-weather-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-push-notification/assets/js/plugin.js?ver=11.0.0' id='jnews-push-notification-js'></script> <script type='text/javascript' src='https://cdn.onesignal.com/sdks/OneSignalSDK.js?ver=6.2.2' async='async' id='remote_sdk-js'></script> <script type='text/javascript' id='gt_widget_script_13323729-js-before'> window.gtranslateSettings = /* document.write */ window.gtranslateSettings || {};window.gtranslateSettings['13323729'] = {"default_language":"fr","languages":["ar","zh-CN","en","fr","de","it","ru","es"],"url_structure":"none","detect_browser_language":1,"flag_style":"3d","flag_size":24,"wrapper_selector":"#gt-wrapper-13323729","alt_flags":[],"switcher_open_direction":"top","switcher_horizontal_position":"right","switcher_vertical_position":"top","switcher_text_color":"#666","switcher_arrow_color":"#666","switcher_border_color":"#ccc","switcher_background_color":"#fff","switcher_background_shadow_color":"#efefef","switcher_background_hover_color":"#fff","dropdown_text_color":"#000","dropdown_hover_color":"#fff","dropdown_background_color":"#eee","flags_location":"\/wp-content\/plugins\/gtranslate\/flags\/"}; </script><script src="https://mycamer.net/wp-content/plugins/gtranslate/js/dwf.js?ver=6.2.2" data-no-optimize="1" data-no-minify="1" data-gt-orig-url="/comment-valider-des-formulaires-avec-bootstrap-5/" data-gt-orig-domain="mycamer.net" data-gt-widget-id="13323729" defer></script><div class="jeg_ad jnews_mobile_sticky_ads "></div><script type='application/ld+json'>{"@context":"http:\/\/schema.org","@type":"article","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/mycamer.net\/comment-valider-des-formulaires-avec-bootstrap-5\/"},"dateCreated":"2021-03-11 05:18:36","datePublished":"2021-03-11 05:18:36","dateModified":"2021-03-11 05:18:36","url":"https:\/\/mycamer.net\/comment-valider-des-formulaires-avec-bootstrap-5\/","headline":"Comment valider des formulaires avec Bootstrap 5","name":"Comment valider des formulaires avec Bootstrap 5","articleBody":" [ad_1]\r\n<br><div>\n\n\t\t\t\n\n\t\t\t\n\n\t\t\t<p class=\"meta\">\n\t\t\t\t<strong class=\"categories\"><a target=\"_blank\" href=\"https:\/\/designmodo.com\/tutorials\/bootstrap\/\" title=\"View all posts in Bootstrap\" class=\"post_tag category-bootstrap\" data-wpel-link=\"internal\" rel=\"noopener\">Amorcer<\/a><\/strong><a target=\"_blank\" href=\"https:\/\/designmodo.com\/author\/samuelnorton\/\" title=\"Posts by Sam Norton\" rel=\"author noopener\" data-wpel-link=\"internal\">Sam Norton<\/a> \u2022 <span itemprop=\"datePublished\" content=\"2021-03-10\">10 mars 2021<\/span> \u2022 7 minutes de lecture \t\t\t<\/p>\n\n\t\t\t<p>La validation des formulaires est l'un des facteurs les plus critiques lorsqu'il s'agit de collecter des informations et de pr\u00e9venir l'utilisation abusive des formulaires Web.<\/p>\n<p>En plus de vous \u00e9viter d'\u00e9ventuelles cyberattaques, la validation de formulaire prot\u00e8ge \u00e9galement votre site Web contre les mauvaises entr\u00e9es de formulaire. Lors de la soumission du formulaire avec validation, l'utilisateur aura la possibilit\u00e9 de modifier les champs de donn\u00e9es contenant des donn\u00e9es non valides avant de les soumettre.<\/p>\n<p>En g\u00e9n\u00e9ral, vous avez besoin de la validation du formulaire comme mesure de s\u00e9curit\u00e9, car les donn\u00e9es de formulaire invalides sont l'une des principales sources de vuln\u00e9rabilit\u00e9s de s\u00e9curit\u00e9 du site Web.<\/p>\n<p>Les formulaires sont enti\u00e8rement pris en charge dans <a target=\"_blank\" href=\"https:\/\/designmodo.com\/bootstrap-5\/\" data-wpel-link=\"internal\" rel=\"noopener\">Bootstrap 5<\/a>. La plupart des composants sont principalement utilis\u00e9s pour donner aux formulaires un aspect propre et r\u00e9actif, ce qui peut \u00eatre utilis\u00e9 avec n'importe quelle taille d'\u00e9cran. Alors que les formulaires Bootstrap 5 re\u00e7oivent automatiquement le formatage correct via des classes donn\u00e9es, en ce qui concerne <a target=\"_blank\" href=\"https:\/\/designmodo.com\/ux-form-validation\/\" data-wpel-link=\"internal\" rel=\"noopener\">validation de formulaire<\/a> vous devez configurer des classes suppl\u00e9mentaires et du JavaScript afin de profiter de son support de validation contemporain d\u00e8s la sortie de la bo\u00eete.<\/p>\n<p>Dans cet article, je vais vous montrer comment utiliser la validation de formulaire Bootstrap 5 pour pr\u00e9senter des commentaires exploitables d\u00e9cents sur les champs de donn\u00e9es de formulaire tels que la zone de texte, la s\u00e9lection, la case \u00e0 cocher, le bouton radio ainsi que d'autres champs de formulaire bootstrap disponibles lors de la soumission du formulaire. Nous utiliserons JavaScript pour d\u00e9sactiver les soumissions de formulaires si des champs invalides sont entr\u00e9s.<\/p>\n<p><strong>Noter:<\/strong> HTML 5 a ses propres moyens de validation, mais il a des limites, en particulier en ce qui concerne la prise en charge des navigateurs. L'une des limitations notables est le manque de personnalisation en ce qui concerne la gestion des messages d'erreur dont vous aurez besoin pour trouver un moyen d'\u00eatre tri\u00e9s. Heureusement, Bootstrap 5 a \u00e0 port\u00e9e de main des styles de validation de formulaire contemporains.<\/p><div class=\"block-p\"><div class=\"fix-8-12 fix-tablet-12-12 margin-top-3\">\n <div class=\"info-box ae-2\" style=\"background: linear-gradient(-45deg, hsl(196, 40%, 91%),hsl(196, 21%, 97%));\">\n <p>G\u00e9n\u00e9rateur de mod\u00e8les d'e-mails en ligne<\/p>\n <p class=\"ae-4\">Avec <a target=\"_blank\" class=\"link\" href=\"https:\/\/designmodo.com\/postcards\/\" data-wpel-link=\"internal\" rel=\"noopener\">Cartes postales<\/a> vous pouvez cr\u00e9er et modifier des mod\u00e8les d'e-mails en ligne sans aucune comp\u00e9tence en codage! Comprend plus de 100 composants pour vous aider \u00e0 cr\u00e9er des mod\u00e8les d'e-mails personnalis\u00e9s plus rapidement que jamais.\n<\/p>\n <a target=\"_blank\" class=\"button big rounded blue margin-top-2 ae-5\" href=\"https:\/\/designmodo.com\/postcards\/\" data-wpel-link=\"internal\" rel=\"noopener\">Essayer gratuitement<\/a><a target=\"_blank\" class=\"button big transparent no-shadow flat text-blue margin-top-2 ae-6\" href=\"https:\/\/designmodo.com\/products\/\" data-wpel-link=\"internal\" rel=\"noopener\">Autres produits<\/a>\n <\/div>\n<\/div><\/div>\n<h2><span id=\"how-it-works\">Comment \u00e7a fonctionne<\/span>\n<\/h2>\n<p>Bootstrap 5 est livr\u00e9 avec des styles de validation tr\u00e8s faciles \u00e0 utiliser mais puissants pour les champs de saisie. Ces styles de validation sont utilis\u00e9s pour pr\u00e9senter certains styles de formulaire et messages, \u00e0 la fois des erreurs et des \u00e9tats de r\u00e9ussite pour les champs de formulaire, et peuvent \u00eatre d\u00e9clench\u00e9s lorsque vous soumettez le formulaire r\u00e9el.<\/p>\n<h3><span id=\"supported-html-elements\">\u00c9l\u00e9ments HTML pris en charge<\/span>\n<\/h3>\n<p>Les styles de validation Bootstrap 5 peuvent \u00eatre utilis\u00e9s sur les \u00e9l\u00e9ments HTML suivants, y compris jusqu'\u00e0 un <strong>.form-control<\/strong> classe dans les groupes d'entr\u00e9e.<\/p>\n<ul><li><strong><entr\u00e9e><\/strong><\/li>\n<li><strong><select><\/strong><\/li>\n<li><strong><textarea><\/strong><\/li>\n<\/ul><p>Pour l'\u00e9l\u00e9ment d'entr\u00e9e, vous pouvez utiliser les styles de validation Bootstrap 5 sur les balises couramment utilis\u00e9es telles que la zone de texte, le bouton radio, la case \u00e0 cocher et la balise d'\u00e9l\u00e9ment de fichier.<\/p>\n<p>La validation du formulaire Bootstrap 5 a essentiellement deux \u00e9tats: <strong>Erreur<\/strong> et <strong>Succ\u00e8s<\/strong>. Celles-ci sont repr\u00e9sent\u00e9es par les classes s\u00e9mantiques suivantes.<\/p>\n<ul><li><strong>.is-invalid: Erreur<\/strong><\/li>\n<li><strong>.is-valid: succ\u00e8s<\/strong><\/li>\n<\/ul><p>Jetons un coup d'\u0153il au code pour rendre ces deux \u00e9tats de validation:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\"> \n<div class=\"col-md-4\"> \n <label for=\"validationSuccess\" class=\"form-label text-success\">Input with success<\/label> \n <input type=\"text\" class=\"form-control is-valid\" id=\"validationSuccess\" required> \n<\/div> \n<div class=\"col-md-4\"> \n <label for=\"validationError\" class=\"form-label text-danger\">Input with error<\/label> \n <input type=\"text\" class=\"form-control is-invalid\" id=\"validationError\" required> \n<\/div> \n<\/pre>\n<p>Le balisage que vous voyez ci-dessus est tr\u00e8s similaire aux entr\u00e9es habituelles avec l'ajout de quelques classes CSS pour appliquer l'apparence et la convivialit\u00e9 de l'\u00e9tat.<\/p>\n<p>Passons en revue le code dont vous devez \u00eatre conscient:<\/p>\n<ul><li>La premi\u00e8re entr\u00e9e est l'\u00e9tat de r\u00e9ussite. Le champ de saisie doit avoir une classe appel\u00e9e <strong>.est valable <\/strong>ajout\u00e9 \u00e0 lui.<\/li>\n<li>La deuxi\u00e8me entr\u00e9e est l'\u00e9tat d'erreur. Le champ de saisie doit avoir une classe appel\u00e9e <strong>.est invalide<\/strong> ajout\u00e9 \u00e0 lui.<\/li>\n<li>Notez que chaque entr\u00e9e a une ic\u00f4ne sur le bord droit de celle-ci. Ces ic\u00f4nes sont automatiquement ajout\u00e9es lorsque vous incluez les fichiers CSS d'amor\u00e7age requis.<\/li>\n<li>Chaque <strong><label><\/strong> la balise a une classe <strong>.text-success <\/strong>et <strong>.text-danger<\/strong> ajout\u00e9 \u00e0 lui. Celles-ci ne sont pas requises dans la validation du formulaire, mais elles sont uniquement \u00e0 des fins de d\u00e9monstration pour colorer l'\u00e9tiquette afin qu'elle corresponde \u00e0 la couleur de l'\u00e9tat.<\/li>\n<\/ul><p>Jetons un coup d'\u0153il \u00e0 ce \u00e0 quoi ces entr\u00e9es de validation devraient ressembler dans le navigateur:<\/p>\n<figure id=\"attachment_620839\" class=\"alignleft\"><img loading=\"lazy\" class=\"size-full wp-image-620839\" src=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image1.png\" alt=\"Comment valider des formulaires avec Bootstrap 5\" width=\"531\" height=\"229\" srcset=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image1.png 531w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image1-5x3.png 5w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image1-300x129.png 300w\" sizes=\"(max-width: 531px) 100vw, 531px\"\/><\/figure><p>Ensuite, voyons comment les messages de validation de formulaire fonctionnent avec la validation de formulaire Bootstrap 5 \u00e0 un niveau tr\u00e8s basique. La validation de formulaire Bootstrap 5 fournit \u00e9galement deux \u00e9tats pour les messages de validation de formulaire similaires \u00e0 la validation d'entr\u00e9e ci-dessus: <strong>Erreur<\/strong> et <strong>Succ\u00e8s<\/strong>.<\/p>\n<p>Celles-ci sont repr\u00e9sent\u00e9es par les classes s\u00e9mantiques suivantes.<\/p>\n<ul><li><strong>.invalid-feedback: Erreur<\/strong><\/li>\n<li><strong>.valid-feedback: succ\u00e8s<\/strong><\/li>\n<\/ul><p>Jetons un coup d'\u0153il au code pour rendre ces deux \u00e9tats de messages de validation:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\"> \n<div class=\"col-md-4\"> \n <label for=\"validationSuccess\" class=\"form-label text-success\">Input with success<\/label> \n <input type=\"text\" class=\"form-control is-valid\" id=\"validationSuccess\" required> \n <div class=\"valid-feedback\"> \n This is a success state form validation message! \n <\/div> \n<\/div> \n<div class=\"col-md-4\"> \n<label for=\"validationError\" class=\"form-label text-danger\">Input with error<\/label> \n<input type=\"text\" class=\"form-control is-invalid\" id=\"validationError\" required> \n<div class=\"invalid-feedback\"> \n This is an error state form validation message! \n<\/div> \n<\/pre>\n<p>Passons en revue le code dont vous devez \u00eatre conscient:<\/p>\n<ul><li>Le div avec une classe <strong>.valid-feedback<\/strong> est le message de validation du formulaire <strong>Succ\u00e8s.<\/strong>\n<\/li>\n<li>Le div avec une classe.<strong>r\u00e9troaction invalide<\/strong> est le message de validation du formulaire <strong>Erreur.<\/strong>\n<\/li>\n<li>Chaque classe indiqu\u00e9e ci-dessus doit \u00eatre utilis\u00e9e ensemble sous le champ de saisie, puis bootstrap \u00e0 l'aide de JavaScript d\u00e9terminera celle \u00e0 afficher en fonction de l'entr\u00e9e de l'utilisateur lors de la soumission du formulaire. Plus d'informations \u00e0 ce sujet plus tard.<\/li>\n<\/ul><p>Jetons un coup d'\u0153il \u00e0 ce \u00e0 quoi ces entr\u00e9es de validation devraient ressembler dans le navigateur:<\/p>\n<figure id=\"attachment_620840\" class=\"alignleft\"><img loading=\"lazy\" class=\"size-full wp-image-620840\" src=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image4.png\" alt=\"Validation du formulaire Bootstrap\" width=\"532\" height=\"297\" srcset=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image4.png 532w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image4-5x3.png 5w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image4-522x292.png 522w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image4-300x167.png 300w\" sizes=\"(max-width: 532px) 100vw, 532px\"\/><\/figure><p>Comme vu ci-dessus, les entr\u00e9es et les messages de validation de formulaire sont color\u00e9s pour correspondre \u00e0 leur \u00e9tat. De plus, notez que nous avons utilis\u00e9 <strong>.est valable<\/strong> et <strong>.est invalide<\/strong> pour correspondre \u00e0 l'\u00e9tat pour une validation particuli\u00e8re.<\/p>\n<p>Cependant, avec Bootstrap et l'utilisation de JavaScript lors de la soumission du formulaire, vous n'avez pas besoin de mettre imp\u00e9rativement ces deux classes sur chaque champ de donn\u00e9es. Bootstrap le g\u00e9rera pour vous en cons\u00e9quence. La validation du formulaire Bootstrap est appliqu\u00e9e \u00e0 l'aide des deux pseudo-classes de CSS, <strong>:valide<\/strong> et<strong>:invalide<\/strong>. Bootstrap a examin\u00e9 les styles de ces classes qui sont g\u00e9n\u00e9ralement appliqu\u00e9s avec l'utilisation de <strong>.a \u00e9t\u00e9 valid\u00e9<\/strong> classe dans le <strong><form><\/strong> \u00e9tiqueter. Le <strong>.est valable <\/strong>et <strong>.est invalide<\/strong> les classes peuvent toujours \u00eatre utilis\u00e9es \u00e0 la place des pseudo-classes pour la validation c\u00f4t\u00e9 serveur. Veuillez noter que si vous utilisez ces classes lors de la validation c\u00f4t\u00e9 serveur, vous n'avez pas besoin d'ajouter <strong>.a \u00e9t\u00e9 valid\u00e9<\/strong> classer.<\/p>\n<h3><span id=\"validation-style-using-tooltips\">Style de validation \u00e0 l'aide des info-bulles<\/span>\n<\/h3>\n<p>Bootstrap est \u00e9galement livr\u00e9 avec des styles d'info-bulles pour ses styles de validation contemporains. L'info-bulle ou info-bulle est un \u00e9l\u00e9ment d'interface utilisateur courant o\u00f9, en survolant un \u00e9l\u00e9ment, une bo\u00eete contextuelle affiche les informations requises pour cet \u00e9l\u00e9ment sp\u00e9cifique, mais dans ce cas, il s'agirait du message de validation.<\/p>\n<p>Pour que la fonction de validation des info-bulles fonctionne, vous devez utiliser <strong>.valid-tooltip<\/strong> ou <strong>.invalid-tooltip<\/strong> classe pour correspondre \u00e0 l'\u00e9tat d'un style de validation particulier et d'un message de validation de formulaire au lieu d'utiliser <strong>.valid-feedback<\/strong> et <strong>.invalid-feedback<\/strong>. De plus, vous devez avoir un \u00e9l\u00e9ment parent avec <strong>position: relative<\/strong> style pour le positionnement des info-bulles.<\/p>\n<p>Le code ci-dessous est identique au code ci-dessus, mais cette fois en utilisant une info-bulle car il s'agit d'un style de validation contemporain.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\"> \n<div class=\"col-md-4 position-relative\"> \n <label for=\"validationSuccess\" class=\"form-label text-success\">Input with success<\/label> \n <input type=\"text\" class=\"form-control\" value=\"Samuel Norton\" required> \n <div class=\"valid-tooltip\"> \n This is a success state form validation message! \n <\/div> \n<\/div> \n<div class=\"col-md-4 position-relative\"> \n <label for=\"validationError\" class=\"form-label text-danger\">Input with error<\/label> \n <input type=\"text\" class=\"form-control\" id=\"validationError\" required> \n <div class=\"invalid-tooltip\"> \n This is an error state form validation message! \n <\/div> \n<\/div> \n<\/pre>\n<p>Jetons un coup d'\u0153il \u00e0 ce \u00e0 quoi ces entr\u00e9es de validation devraient ressembler dans le navigateur:<\/p>\n<figure id=\"attachment_620842\" class=\"alignleft\"><img loading=\"lazy\" class=\"size-full wp-image-620842\" src=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image3.png\" alt=\"Validation JavaScript\" width=\"539\" height=\"306\" srcset=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image3.png 539w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image3-5x3.png 5w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image3-300x170.png 300w\" sizes=\"(max-width: 539px) 100vw, 539px\"\/><\/figure><h3><span id=\"using-javascript\">Utilisation de JavaScript<\/span>\n<\/h3>\n<p>Voyons maintenant comment JavaScript peut aider nos styles de validation bootstrap \u00e0 emp\u00eacher toute soumission invalide de la part des utilisateurs.<\/p>\n<p>Tout d'abord, jetez un \u0153il au balisage suivant:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\"> \n<form class=\"row g-3 requires-validation\" novalidate> \n <div class=\"col-md-12\"> \n <label for=\"username\" class=\"form-label\">Username:<\/label> \n <input type=\"text\" class=\"form-control\" id=\"username\" required> \n <div class=\"valid-feedback\"> \n Username looks good! \n <\/div> \n <div class=\"invalid-feedback\"> \n Username is required! \n <\/div> \n <\/div> \n <div class=\"col-md-12\"> \n <label for=\"password\" class=\"form-label\">Password:<\/label> \n <input type=\"text\" class=\"form-control\" id=\"password\" required> \n <div class=\"valid-feedback\"> \n Password looks good! \n <\/div> \n <div class=\"invalid-feedback\"> \n Password is required! \n <\/div> \n <\/div> \n <div class=\"col-12\"> \n <button class=\"btn btn-primary\" type=\"submit\">Login<\/button> \n <\/div> \n<\/form> \n<\/pre>\n<p>Regardons de plus pr\u00e8s le balisage ci-dessus:<\/p>\n<ul><li>La balise form a un <strong>novalidate<\/strong> attribut bool\u00e9en. Cela emp\u00eache les info-bulles de commentaires par d\u00e9faut du navigateur sans l'occlusion de l'acc\u00e8s aux API de validation de formulaire dans JavaScript.<\/li>\n<li>Nous n'avons pas inclus le <strong>.est valable<\/strong> et <strong>.est invalide<\/strong> classes sur chaque champ de donn\u00e9es. Sangles de botte <strong>:invalide<\/strong> et <strong>:valide<\/strong> styles l'appliquera aux contr\u00f4les de formulaire avec l'utilisation de JavaScript.<\/li>\n<li>Nous avons ajout\u00e9 un <strong>.requires-validation<\/strong> classe \u00e0 l'int\u00e9rieur de la balise form. Ce n'est pas une classe s\u00e9mantique de bootstrap. Vous pouvez le renommer avec le nom de classe que vous pr\u00e9f\u00e9rez. Le but de cette classe est d'aider JavaScript \u00e0 r\u00e9cup\u00e9rer tous les \u00e9l\u00e9ments du formulaire pour appliquer des styles de validation d'amor\u00e7age personnalis\u00e9s en cons\u00e9quence (plus d'informations \u00e0 ce sujet plus tard).<\/li>\n<li>Sur chaque champ de donn\u00e9es ou entr\u00e9es, nous avons ajout\u00e9 le <strong>obligatoire<\/strong> attribut \u00e0 la fin. Cela indique simplement qu'un champ de donn\u00e9es particulier doit \u00eatre rempli avant de soumettre le formulaire.<\/li>\n<li>Encore une fois, nous utilisons <strong>.valid-feedback<\/strong> et <strong>.invalid-feedback<\/strong> au bas de chaque champ de donn\u00e9es. Le div avec une classe <strong>.valid-feedback<\/strong> est le message de validation du formulaire <strong>Succ\u00e8s<\/strong> O\u00f9, le div avec une classe <strong>.invalid-feedback<\/strong> est le message de validation du formulaire <strong>Erreur<\/strong> Etat.<\/li>\n<\/ul><p>Ensuite, ajoutons le code JavaScript pour d\u00e9sactiver les soumissions de formulaire s'il y a des champs non valides lorsque l'utilisateur soumet le formulaire:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\"> \n<script> \n(function () { \n'use strict' \nconst forms = document.querySelectorAll('.requires-validation') \nArray.from(forms) \n .forEach(function (form) { \n form.addEventListener('submit', function (event) { \n \tif (!form.checkValidity()) { \n event.preventDefault() \n event.stopPropagation() \n \t} \n \n form.classList.add('was-validated') \n\t}, false) \n }) \n})() \n<\/script> \n<\/pre>\n<p>Le code JavaScript ci-dessus obtient simplement tous les formulaires via <strong>querySelectorAll<\/strong> et retourne une NodeList statique qui repr\u00e9sente une liste des \u00e9l\u00e9ments du document \u00e0 l'aide de la <strong>.requires-validation<\/strong> classer.<\/p>\n<p>Ensuite, pour chacun des formulaires trouv\u00e9s, le code JavaScript ajoutera un <strong>EventListener<\/strong> qui sera appel\u00e9 chaque fois que l'\u00e9v\u00e9nement sp\u00e9cifi\u00e9 est livr\u00e9 et qui est soumis. Ainsi, chaque fois qu'un utilisateur soumet le formulaire, <strong>form.checkValidity () <\/strong>sera appel\u00e9. Cette m\u00e9thode v\u00e9rifie si le champ de donn\u00e9es a des contraintes et remplit les contraintes donn\u00e9es. En cas d'\u00e9chec, le navigateur d\u00e9clenche simplement un \u00e9v\u00e9nement invalide et renvoie false.<\/p>\n<p>Donc, en cas d'\u00e9chec, il appellera les deux m\u00e9thodes JavaScript suivantes:<\/p>\n<ul><li>\n<strong>preventDefault ()<\/strong> - une m\u00e9thode qui emp\u00eachera simplement l'\u00e9v\u00e9nement par d\u00e9faut d'\u00eatre pris comme il le serait normalement. Dans ce cas, la soumission du formulaire.<\/li>\n<li>\n<strong>stopPropagation ()<\/strong> - une m\u00e9thode qui emp\u00eache la poursuite de la propagation (bouillonnement) de l'\u00e9v\u00e9nement en cours.<\/li>\n<\/ul><p>Enfin, il ajoutera <strong>.a \u00e9t\u00e9 valid\u00e9<\/strong> classe dans la balise form pour afficher l'\u00e9tat de validation du formulaire et les messages.<\/p>\n<p>Bootstrap couvre le <strong>:invalide<\/strong> et <strong>:valide<\/strong> styles \u00e0 parent <strong>.a \u00e9t\u00e9 valid\u00e9<\/strong> classe lorsqu'elle est appliqu\u00e9e au formulaire. Vous pouvez r\u00e9ellement mettre le <strong>.a \u00e9t\u00e9 valid\u00e9<\/strong> classe \u00e0 la balise de formulaire m\u00eame sans l'aide de JavaScript, mais qui affichera automatiquement les \u00e9tats de validation du formulaire et les messages avant m\u00eame que l'utilisateur ne soumette le formulaire. Cependant, avoir JavaScript pour s'occuper de l'\u00e9v\u00e9nement de soumission et de validation du formulaire vous donnera un processus de validation contemporain plus s\u00e9curis\u00e9 c\u00f4t\u00e9 client.<\/p>\n<p>Voyons \u00e0 quoi cela devrait ressembler dans le navigateur:<\/p>\n<figure id=\"attachment_620843\" class=\"alignleft\"><img loading=\"lazy\" class=\"size-full wp-image-620843\" src=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image2.png\" alt=\"Code JavaScript\" width=\"527\" height=\"334\" srcset=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image2.png 527w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image2-5x3.png 5w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image2-300x190.png 300w\" sizes=\"(max-width: 527px) 100vw, 527px\"\/><\/figure><h3><span id=\"putting-it-all-together\">Mettre tous ensemble<\/span>\n<\/h3>\n<p>Maintenant, pour mettre tout cela ensemble, cr\u00e9ons une page d'inscription simple et voyons comment nous pouvons appliquer les styles de validation contemporains de Bootstrap 5 sur chaque champ de donn\u00e9es.<\/p>\n<p>Ci-dessous le balisage.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\"> \n<div class=\"form-body\"> \n <div class=\"row\"> \n <div class=\"form-holder\"> \n <div class=\"form-content\"> \n <div class=\"form-items\"> \n <h3>Register Today<\/h3> \n <p>Fill in the data below.<\/p> \n <form class=\"requires-validation\" novalidate> \n <div class=\"col-md-12\"> \n <input class=\"form-control\" type=\"text\" name=\"name\" placeholder=\"Full Name\" required> \n <div class=\"valid-feedback\">Username field is valid!<\/div> \n <div class=\"invalid-feedback\">Username field cannot be blank!<\/div> \n <\/div> \n <div class=\"col-md-12\"> \n <input class=\"form-control\" type=\"email\" name=\"email\" placeholder=\"E-mail Address\" required> \n <div class=\"valid-feedback\">Email field is valid!<\/div> \n <div class=\"invalid-feedback\">Email field cannot be blank!<\/div> \n <\/div> \n <div class=\"col-md-12\"> \n <select class=\"form-select mt-3\" required> \n <option selected disabled value=\"\">Position<\/option> \n <option value=\"jweb\">Junior Web Developer<\/option> \n <option value=\"sweb\">Senior Web Developer<\/option> \n <option value=\"pmanager\">Project Manager<\/option> \n <\/select> \n <div class=\"valid-feedback\">You selected a position!<\/div> \n <div class=\"invalid-feedback\">Please select a position!<\/div> \n <\/div> \n <div class=\"col-md-12\"> \n <input class=\"form-control\" type=\"password\" name=\"password\" placeholder=\"Password\" required> \n <div class=\"valid-feedback\">Password field is valid!<\/div> \n <div class=\"invalid-feedback\">Password field cannot be blank!<\/div> \n <\/div> \n <div class=\"col-md-12 mt-3\"> \n <label class=\"mb-3 mr-1\" for=\"gender\">Gender: <\/label> \n <input type=\"radio\" class=\"btn-check\" name=\"gender\" id=\"male\" autocomplete=\"off\" required> \n <label class=\"btn btn-sm btn-outline-secondary\" for=\"male\">Male<\/label> \n <input type=\"radio\" class=\"btn-check\" name=\"gender\" id=\"female\" autocomplete=\"off\" required> \n <label class=\"btn btn-sm btn-outline-secondary\" for=\"female\">Female<\/label> \n <input type=\"radio\" class=\"btn-check\" name=\"gender\" id=\"secret\" autocomplete=\"off\" required> \n <label class=\"btn btn-sm btn-outline-secondary\" for=\"secret\">Secret<\/label> \n <div class=\"valid-feedback mv-up\">You selected a gender!<\/div> \n <div class=\"invalid-feedback mv-up\">Please select a gender!<\/div> \n <\/div> \n <div class=\"form-check\"> \n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"invalidCheck\" required> \n <label class=\"form-check-label\">I confirm that all data are correct<\/label> \n <div class=\"invalid-feedback\">Please confirm that the entered data are all correct!<\/div> \n <\/div> \n <div class=\"form-button mt-3\"> \n <button id=\"submit\" type=\"submit\" class=\"btn btn-primary\">Register<\/button> \n <\/div> \n <\/form> \n <\/div> \n <\/div> \n <\/div> \n <\/div> \n<\/div> \n<\/pre>\n<p>Ensuite, j'ai ajout\u00e9 CSS pour personnaliser l'apparence de notre formulaire.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\"> \n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;700;900&display=swap'); \n*, \nbody { \n\tfont-family: 'Poppins', sans-serif; \n\tfont-weight: 400; \n\t-webkit-font-smoothing: antialiased; \n\ttext-rendering: optimizeLegibility; \n\t-moz-osx-font-smoothing: grayscale; \n} \n \nhtml, \nbody { \n\theight: 100%; \n\tbackground-color: #152733; \n\toverflow: hidden; \n} \n \n.form-holder { \n\tdisplay: flex; \n\tflex-direction: column; \n\tjustify-content: center; \n\talign-items: center; \n\ttext-align: center; \n\tmin-height: 100vh; \n} \n \n.form-holder .form-content { \n\tposition: relative; \n\ttext-align: center; \n\tdisplay: -webkit-box; \n\tdisplay: -moz-box; \n\tdisplay: -ms-flexbox; \n\tdisplay: -webkit-flex; \n\tdisplay: flex; \n\t-webkit-justify-content: center; \n\tjustify-content: center; \n\t-webkit-align-items: center; \n\talign-items: center; \n\tpadding: 60px; \n} \n \n.form-content .form-items { \n\tborder: 3px solid #fff; \n\tpadding: 40px; \n\tdisplay: inline-block; \n\twidth: 100%; \n\tmin-width: 540px; \n\t-webkit-border-radius: 10px; \n\t-moz-border-radius: 10px; \n\tborder-radius: 10px; \n\ttext-align: left; \n\t-webkit-transition: all 0.4s ease; \n\ttransition: all 0.4s ease; \n} \n \n.form-content h3 { \n\tcolor: #fff; \n\ttext-align: left; \n\tfont-size: 28px; \n\tfont-weight: 600; \n\tmargin-bottom: 5px; \n} \n \n.form-content h3.form-title { \n\tmargin-bottom: 30px; \n} \n \n.form-content p { \n\tcolor: #fff; \n\ttext-align: left; \n\tfont-size: 17px; \n\tfont-weight: 300; \n\tline-height: 20px; \n\tmargin-bottom: 30px; \n} \n \n.form-content label, \n.was-validated .form-check-input:invalid~.form-check-label, \n.was-validated .form-check-input:valid~.form-check-label { \n\tcolor: #fff; \n} \n \n.form-content input[type=text], \n.form-content input[type=password], \n.form-content input[type=email], \n.form-content select { \n\twidth: 100%; \n\tpadding: 9px 20px; \n\ttext-align: left; \n\tborder: 0; \n\toutline: 0; \n\tborder-radius: 6px; \n\tbackground-color: #fff; \n\tfont-size: 15px; \n\tfont-weight: 300; \n\tcolor: #8D8D8D; \n\t-webkit-transition: all 0.3s ease; \n\ttransition: all 0.3s ease; \n\tmargin-top: 16px; \n} \n \n.btn-primary { \n\tbackground-color: #6C757D; \n\toutline: none; \n\tborder: 0px; \n\tbox-shadow: none; \n} \n \n.btn-primary:hover, \n.btn-primary:focus, \n.btn-primary:active { \n\tbackground-color: #495056; \n\toutline: none !important; \n\tborder: none !important; \n\tbox-shadow: none; \n} \n \n.form-content textarea { \n\tposition: static !important; \n\twidth: 100%; \n\tpadding: 8px 20px; \n\tborder-radius: 6px; \n\ttext-align: left; \n\tbackground-color: #fff; \n\tborder: 0; \n\tfont-size: 15px; \n\tfont-weight: 300; \n\tcolor: #8D8D8D; \n\toutline: none; \n\tresize: none; \n\theight: 120px; \n\t-webkit-transition: none; \n\ttransition: none; \n\tmargin-bottom: 14px; \n} \n \n.form-content textarea:hover, \n.form-content textarea:focus { \n\tborder: 0; \n\tbackground-color: #ebeff8; \n\tcolor: #8D8D8D; \n} \n \n.mv-up { \n\tmargin-top: -9px !important; \n\tmargin-bottom: 8px !important; \n} \n \n.invalid-feedback { \n\tcolor: #ff606e; \n} \n \n.valid-feedback { \n\tcolor: #2acc80; \n} \n<\/pre>\n<p>Enfin, nous utiliserons le m\u00eame code JavaScript ci-dessus pour emp\u00eacher l'utilisateur de soumettre des champs vides ainsi que pour afficher les \u00e9tats de validation et les styles de message de validation de formulaire.<\/p>\n<p>J'ai compil\u00e9 le code ci-dessous sur Codepen. N'h\u00e9sitez pas \u00e0 le modifier et \u00e0 jouer.<\/p>\n<p class=\"codepen\" data-height=\"665\" data-theme-id=\"dark\" data-default-tab=\"html,result\" data-user=\"samnorton\" data-slug-hash=\"oNYajYM\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Registration Form (Bootstrap 5 Validation)\">\n <span>Voir le stylo <a target=\"_blank\" href=\"https:\/\/codepen.io\/samnorton\/pen\/oNYajYM\" data-wpel-link=\"external\" rel=\"nofollow noopener\"><br\/>Formulaire d'inscription (validation Bootstrap 5)<\/a> par Sam Norton (<a target=\"_blank\" href=\"https:\/\/codepen.io\/samnorton\" data-wpel-link=\"external\" rel=\"nofollow noopener\">@samnorton<\/a>)<br\/>sur <a target=\"_blank\" href=\"https:\/\/codepen.io\" data-wpel-link=\"external\" rel=\"nofollow noopener\">CodePen<\/a>.<\/span>\n<\/p>\n\n<h2><span id=\"wrapping-up\">Emballer<\/span>\n<\/h2>\n<p>La cr\u00e9ation de sites Web et m\u00eame d'applications aujourd'hui est beaucoup plus difficile et prend du temps qu'auparavant. L'utilisation des m\u00e9thodes et des styles de validation contemporains de Bootstrap 5 vous fournira un moyen simple, mais des commentaires pr\u00e9cieux et exploitables \u00e0 vos utilisateurs pr\u00eats \u00e0 l'emploi sans trop vous soucier des styles.<\/p>\n<p>La meilleure partie est que vous pouvez toujours personnaliser le message de validation du formulaire, y compris les styles \u00e0 votre go\u00fbt sans r\u00e9inventer la roue.<\/p>\n\n<div class=\"block-bottom\"><div class=\"fix-8-12 subscribe-form ae-1\" style=\"background:linear-gradient(-45deg, #0982a7,hsla(218, 100%, 26%, 1));\">\n <h5 class=\"small margin-bottom-2\">Vous aimez ce que vous lisez? Abonnez-vous \u00e0 nos meilleures histoires.<\/h5>\n \n<\/div><\/div>\n\t\t\t\t\t<\/div>\r\n<br>[ad_2]\r\n\r\n<br> -- to <a href=\"https:\/\/designmodo.com\/validate-forms-bootstrap\/ \">designmodo.com <\/a>","author":{"@type":"Person","name":"Caleb","url":"https:\/\/mycamer.net\/author\/admin237\/","sameAs":["https:\/\/mycamer.net"]},"articleSection":["G\u00e9n\u00e9rale"],"image":{"@type":"ImageObject","url":"https:\/\/mycamer.net\/wp-content\/uploads\/2021\/03\/Validate-Forms-Bootstrap-1-620837-preview.jpg","width":1200,"height":630},"publisher":{"@type":"Organization","name":"MYCAMER NETWORK","url":"https:\/\/mycamer.net","logo":{"@type":"ImageObject","url":"https:\/\/mycamer.net\/wp-content\/uploads\/2021\/12\/logo-mycamer2-1.png"},"sameAs":["http:\/\/facebook.com","http:\/\/twitter.com","http:\/\/plus.google.com","http:\/\/pinterest.com","#","#"]}}</script> <script type='application/ld+json'>{"@context":"http:\/\/schema.org","@type":"hentry","entry-title":"Comment valider des formulaires avec Bootstrap 5","published":"2021-03-11 05:18:36","updated":"2021-03-11 05:18:36"}</script> <script type='application/ld+json'>{"@context":"http:\/\/schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https:\/\/mycamer.net","name":"Home"}},{"@type":"ListItem","position":2,"item":{"@id":"https:\/\/mycamer.net\/news\/generale\/","name":"G\u00e9n\u00e9rale"}},{"@type":"ListItem","position":3,"item":{"@id":"https:\/\/mycamer.net","name":"Home"}},{"@type":"ListItem","position":4,"item":{"@id":"https:\/\/mycamer.net\/news\/generale\/","name":"G\u00e9n\u00e9rale"}}]}</script> <script type="text/javascript">;!function(){"use strict";window.jnews=window.jnews||{},window.jnews.first_load=window.jnews.first_load||{},window.jnews.first_load=function(){var e=this,t=jnews.library,n="object"==typeof jnews&&"object"==typeof jnews.library;e.data=null,e.run_ajax=!0,e.run_loginregister=!0,e.clear=function(){e.run_ajax=!0,e.run_loginregister=!0,e.data=null},e.init=function(){n&&(t.globalBody.querySelectorAll(".jeg_popup_account").length&&jnews.loginregister&&e.run_loginregister&&(e.run_loginregister=!1,jnews.loginregister.init(),jnews.loginregister.hook_form()),jfla.length&&e.run_ajax&&(e.run_ajax=!1,e.do_ajax({action:"jnews_first_load_action",jnews_id:jnewsoption.postid,load_action:jfla})))},e.update_counter=function(){if(n){var o={total_view:t.globalBody.querySelectorAll(".jeg_share_stats .jeg_views_count .counts"),total_share:t.globalBody.querySelectorAll(".jeg_share_stats .jeg_share_count .counts"),total_comment:t.globalBody.querySelectorAll(".jeg_meta_comment a span")};t.forEach(Object.entries(e.data.counter),(function([e,n]){o[e].length&&t.forEach(o[e],(function(e,o){t.setText(e,n)}))}))}},e.do_ajax=function(o){if(n){var a=new XMLHttpRequest;a.onreadystatechange=function(){XMLHttpRequest.DONE===a.readyState&&200==a.status&&(e.data=JSON.parse(a.responseText),e.data.counter&&"object"==typeof e.data.counter&&e.update_counter())},a.open("POST",jnews_ajax_url,!0),a.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8"),a.send(t.httpBuildQuery(o))}}},window.jnews.first_load=new window.jnews.first_load,jnews.first_load.init()}();</script></body> </html> <div class="mads-block"></div>