La soumission de formulaires peut souvent être source d’erreurs, notamment lorsque les champs ne sont pas correctement validés.
Ces erreurs peuvent conduire à des soumissions incorrectes, frustrant les utilisateurs et nuisant à l’expérience globale.
L’événement submit en jQuery offre une solution puissante pour intercepter et gérer la soumission des formulaires, garantissant une validation efficace et une meilleure expérience utilisateur.
Table de matière
Apprenez les bases de jQuery à travers des projets pratiques et engageants.
L’événement submit() dans jQuery est déclenché lorsqu’un formulaire est soumis, soit en cliquant sur le bouton Soumettre, soit en appuyant sur la touche Entrée alors qu’un champ de formulaire a le focus. Découvrons-en plus sur cet événement dans une application.
Appliquer la méthode d’événement submit
Pour l’application donc de la méthode submit, il s’agira d’utiliser la bibliothèque jQuery pour gérer la soumission d’un formulaire avec l’ID #form. L’exemple suivant affichera un message en fonction de la valeur saisie lorsque vous essayez de soumettre le formulaire.
Vous avez ici tout le code nécessaire pour réaliser cela.
Code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-2a952097-6b04-42fe-95ff-6dd3453c1a01: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-2a952097-6b04-42fe-95ff-6dd3453c1a01: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"2a952097-6b04-42fe-95ff-6dd3453c1a01","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<form action="traitement.html" method="post" id="form">
<h1>Créer un compte</h1>
<select id="civilite">
<option value="0">civilite</option>
<option value="1">homme</option>
<option value="2">femme</option>
</select>
<input type="text" placeholder="nom" id="nom">
<input type="text" placeholder="prénom" id="prenom">
<input type="submit" value="valider">
</form>
<script src="js/jquery.js" data-rocket-defer defer></script>
<script src="js/script.js" data-rocket-defer defer></script>
<script>window.addEventListener('DOMContentLoaded', function() {var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"2ad1e5ca74","url":"https:\/\/blog.alphorm.com\/evenement-submit-jquery-formulaires","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}});</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Code de la page de traitement :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traitement</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-2a952097-6b04-42fe-95ff-6dd3453c1a01: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-2a952097-6b04-42fe-95ff-6dd3453c1a01: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"2a952097-6b04-42fe-95ff-6dd3453c1a01","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>Traitement</h1>
<p><a href="index.html" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Retour</a></p>
<script>window.addEventListener('DOMContentLoaded', function() {var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"2ad1e5ca74","url":"https:\/\/blog.alphorm.com\/evenement-submit-jquery-formulaires","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}});</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
Code CSS :
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #8e44ad;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
form {
width: 400px;
background-color: #ecf0f1;
padding: 20px;
border-radius: 10px;
}
h1 {
text-align: center;
margin-top: 0;
margin-bottom: 30px;
padding-bottom: 9px;
border-bottom: 2px dashed #ccc;
}
input, select {
display: block;
padding: 20px;
margin-top: 15px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
text-transform: capitalize;
}
::placeholder {
margin-left: 8px;
font-size: 1rem;
letter-spacing: 1px;
color: #bbb;
}
input[type="submit"] {
cursor: pointer;
font-size: 1.2rem;
}
option {
font-size: 1rem;
background-color: #bbb;
}
Code JavaScript :
$(document).ready(function() {
$('#form').submit(function(event) {
event.preventDefault();
let civilite = $('#civilite').val();
let nom = $('#nom').val();
let prenom = $('#prenom').val();
if(civilite == 0 || nom == '' || prenom == '') {
alert('Veuillez entrer votre nom et/ou votre prénom et/ou choisir une civilité');
} else {
$('#form').off('submit').submit();
}
});
});
Ce code JavaScript vérifie donc si l’un des trois champs du formulaire est vide ou si le champ #civilite a une valeur de 0. Si l’une de ces conditions est vraie, il affiche un message d’alerte invitant l’utilisateur à remplir les champs obligatoires.
Si les champs du formulaire sont valides, le formulaire sera soumis normalement vers le fichier traitement.html.
Dans cet exemple, nous avons pu utiliser l’événement submit() pour intercepter la soumission du formulaire et envoyer les données du formulaire à la page de traitement. La méthode event.preventDefault() est utilisée pour empêcher la soumission normale du formulaire.
Astuce Pratique
: un formulaire peut être soumis soit en cliquant sur un bouton d’envoi, soit en appuyant sur Entrée lorsque certains éléments du formulaire sont activés.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment fonctionne l'événement submit en jQuery?
L’événement submit en jQuery est déclenché lorsqu’un formulaire est soumis, soit par un clic sur le bouton Soumettre, soit par la touche Entrée. Il permet d’intercepter l’action avant l’envoi des données, offrant ainsi la possibilité de vérifier et valider les champs de formulaire. L’utilisation de jQuery simplifie cette gestion en permettant un contrôle précis grâce à des méthodes telles que event.preventDefault().
Comment empêcher la soumission d'un formulaire en jQuery?
Pour empêcher la soumission d’un formulaire en jQuery, vous pouvez utiliser la méthode event.preventDefault(). Cette méthode stoppe l’action par défaut, empêchant ainsi l’envoi du formulaire. Elle est particulièrement utile pour valider les données saisies avant de les soumettre ou pour afficher des messages d’erreur si certains champs ne sont pas correctement remplis.
Comment valider des champs de formulaire avec jQuery?
La validation des champs de formulaire avec jQuery se fait en ajoutant des vérifications dans l’événement submit. Par exemple, vous pouvez vérifier si les champs obligatoires sont vides ou contiennent des valeurs invalides. Si une condition de validation échoue, vous pouvez afficher un message d’alerte et utiliser event.preventDefault() pour empêcher la soumission jusqu’à ce que toutes les conditions soient remplies.
Pourquoi utiliser jQuery pour gérer les formulaires?
jQuery simplifie la gestion des formulaires en offrant une syntaxe concise et des fonctions puissantes pour intercepter les événements, valider les données et manipuler l’interface utilisateur. L’utilisation de jQuery permet de réduire le code JavaScript nécessaire et d’assurer une compatibilité entre les navigateurs, facilitant ainsi le développement et la maintenance de formulaires complexes.
Qu'est-ce que preventDefault en jQuery?
La méthode preventDefault en jQuery est utilisée pour empêcher le comportement par défaut d’un événement. Dans le contexte d’un formulaire, elle empêche la soumission automatique, permettant de valider ou de manipuler les données avant l’envoi. Cette méthode est essentielle pour s’assurer que toutes les conditions de validation sont remplies avant de soumettre les données à la page de traitement.
Conclusion
En utilisant l’événement submit de jQuery, vous pouvez améliorer la gestion des formulaires sur votre site. Comment pourriez-vous intégrer ces techniques dans d’autres aspects de votre développement web?
