Bonjour les amies aujourd’hui nous allons voir comment valider un formulaire html en javascript. alors ce post est destiné aux débutants ainsi qu’aux intermédiaires.
En effet lors de la saisie dans un formulaire, vous avez toujours besoin de contrôler les champs de saisie pour que l’utilisateur ne met pas de mauvaises données. c’est ainsi que vous devez mettre en place des règles de sécurité pour empêcher les malveillants à compromettre votre application ou votre site internet.
Dans ce cas vous aurez besoin de contrôler est ce que les données saisies par l’utilisateur sont bonne, est ce que l’utilisateur a rempli tous les champs ? ensuite les données seront envoyées au serveur qui va faire le traitement. ce qui permet au server de ne pas avoir à travailler trop et d’augmenter les performances de l’application.
C’est pour cela que nous avons pensé qu’il serait utile de faire un post sur la validation de formulaire en Javascript. vous pouvez suivre la video entiere disponible sur ma chaine Youtube :
Comme vous le voyez au niveau de l’image sur la vidéo, tant que les champs ne sont pas valide le formulaire envoie une erreur. et c’est tout à fait normal.
Pour créer ce magnifique formulaire et de procéder à la validation, vous aurez besoin de créer trois fichiers. Un fichier de type HTML pour mettre le code html, un fichier de type CSS pour mettre du style au niveau du formulaire et un fichier Javascript qui va nous permettre de contrôler le formulaire.
Premièrement Créez un fichier avec le nom index.html , copiez et collez les codes donnés dans votre fichier html. N’oubliez pas que vous devez créer un fichier avec une extension .html
<!DOCTYPE html>
<html>
<head>
<title>form validation</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form id="form">
<div>
<label for="username">User Name</label>
<i class="fas fa-user"></i>
<input type="text" name="username" id="username" placeholder="Identifiant" />
<i class="fas fa-exclamation-circle failure-icon"></i>
<i class="far fa-check-circle success-icon"></i>
<div class="error"></div>
</div>
<div>
<label for="email">Email</label>
<i class="far fa-envelope"></i>
<input type="email" name="email" id="email" placeholder="email" />
<i class="fas fa-exclamation-circle failure-icon"></i>
<i class="far fa-check-circle success-icon"></i>
<div class="error"></div>
</div>
<div>
<label for="password">Password</label>
<i class="fas fa-lock"></i>
<input type="password" name="password" id="password" placeholder="mot de passe" />
<i class="fas fa-exclamation-circle failure-icon"></i>
<i class="far fa-check-circle success-icon"></i>
<div class="error"></div>
</div>
<button type="submit" id="submit">Submit</button>
</form>
</div>
<script src="form.js"></script>
<script type='text/javascript' id="soledad-pagespeed-header" data-cfasync="false">!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}));
(function () {
var PenciLazy = new LazyLoad({
elements_selector: '.penci-lazy',
data_bg: 'bgset',
class_loading: 'lazyloading',
class_entered: 'lazyloaded',
class_loaded: 'pcloaded',
unobserve_entered: true
});
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
PenciLazy.update();
});
observer.observe(document, {
subtree: true,
attributes: true
});
})();
</script>
</body>
</html>
Ensuite Créez un fichier avec le nom style.css , copiez et collez les codes donnés dans votre fichier CSS. N’oubliez pas que vous devez créer un fichier avec une extension .css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-family: 'Poppins';
background: #9ba0f6;
}
.container {
display: flex;
flex-direction: row;
}
form {
display: flex;
flex-direction: column;
justify-content: center;
width: 45%;
margin: 0 auto;
box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, 0.1);
padding: 50px;
background-color: #fff;
margin-top: 2rem;
border-radius: 10px;
}
.title {
font-size: 25px;
font-weight: bold;
margin-bottom: 20px;
}
form div input {
width: 100%;
height: 8vh;
border-radius: 8px;
outline: none;
border: 2px solid #c4c4c4;
padding: 0 30px;
box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 5px;
}
form div {
position: relative;
margin-bottom: 15px;
}
input:focus {
border: 2px solid #f2796e;
}
.question {
font-size: 15px;
}
span {
color: #f2796e;
cursor: pointer;
}
form div i {
position: absolute;
padding: 13px;
}
.success-icon,
.failure-icon {
right: 0;
opacity: 0;
}
.failure-icon,
.error {
color: red;
}
.success-icon {
color: green;
}
.error {
font-size: 14.5px;
margin-top: 5px;
}
button {
margin-top: 15px;
width: 100%;
height: 45px;
background-color: #9ba0f6;
border: none;
border-radius: 8px;
color: #fff;
font-size: 20px;
cursor: pointer;
transition: all 0.1s ease;
}
button:hover {
opacity: 0.8;
}
/**
* ! Media Queries are here
**/
@media (max-width: 900px) {
.container {
flex-direction: column;
margin: 2rem;
}
form,
.content {
width: 100%;
}
}
@media (max-width: 425px) {
form {
padding: 20px;
}
}
En fin Créez un fichier avec le nom form.js , copiez et collez les codes donnés dans votre fichier javascript. N’oubliez pas que vous devez créer un fichier avec une extension .js
Nb: assurez vous que ce fichier est linké avec le fichier HTML. et si vous remarquez bien le code HTML, j’ai déjà lié les deux fichiers. Attention au nom des fichiers.
let id = (id) => document.getElementById(id);
let formClass = (formClass) => document.getElementsByClassName(formClass);
let username = id("username"),
email = id("email"),
password = id("password"),
form = id("form"),
errorMsg = formClass("error"),
successIcon = formClass("success-icon"),
failureIcon = formClass("failure-icon");
form.addEventListener("submit", (e) => {
e.preventDefault();
invalForm(username, 0, "le champ ne doit pas etre vide");
invalForm(email, 1, "le champ ne doit pas etre vide");
invalForm(password, 2, "le champ ne doit pas etre vide");
});
let invalForm = (id, serial, message) => {
if (id.value.trim() === "") {
errorMsg[serial].innerHTML = message;
id.style.border = "2px solid red";
// icons
failureIcon[serial].style.opacity = "1";
successIcon[serial].style.opacity = "0";
} else {
errorMsg[serial].innerHTML = "";
id.style.border = "2px solid green";
// icons
failureIcon[serial].style.opacity = "0";
successIcon[serial].style.opacity = "1";
}
};
1 comment
Wonderful Coach