Success Checkmark
Dès que le champ respecte sa règle (5 caractères par défaut, ou votre pattern), son cadre passe au vert et une coche se trace à droite.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Formulaires comprend 20 effets, dont 2 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
À chaque événement input (frappe, collage, saisie automatique), le script décide si le champ est bon : longueur au moins égale à son attribut minlength (5 dans le HTML livré) et aucune violation de pattern, de type ni de maxlength. Les règles sont donc celles que vous écrivez dans le HTML, pas une constante cachée dans le script.
Quand le champ devient bon, .okmk-group reçoit is-valid : cadre et fond verts, coche qui apparaît en fondu (0,3 s) pendant que son tracé se dessine (stroke-dashoffset de 24 à 0 en 0,4 s, @keyframes okmk-draw). Repasse-t-il sous la règle, tout redevient neutre ; au retour suivant, la coche se redessine depuis le début.
Le champ porte un vrai name et part avec le formulaire. Un reset du formulaire remet la coche à zéro. Chaque .fx-0285-root fonctionne seul ; rien n'est posé sur window.
Accessibilité
- Nom du champ : étiquette réelle dans un
<label>masqué visuellement (« Code de 5 caractères minimum »), à adapter à votre usage ; le placeholder ne sert que d'exemple de saisie. - Succès annoncé : une zone
role="status"dit « Valide » une seule fois, au passage au vert, sans répéter à chaque touche. La coche SVG estaria-hidden: elle n'est pas lue comme une image sans nom. - Clavier et toucher : c'est un champ texte standard, rien ne dépend de la souris.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la coche apparaît directement complète, sans tracé. - Ce que l'effet ne fait pas : il n'affiche aucun message quand la saisie est incomplète. Pour expliquer la règle, ajoutez une aide visible sous le champ.
Compatibilité navigateur
1,3 Ko de JavaScript, CSS avec variables, un SVG en ligne. Mesuré le 08/11/2026 dans Chromium, Firefox et WebKit (Playwright) : tracé encore en cours 150 ms après le passage au vert puis complet, redessiné après un effacement, deux copies indépendantes, valeur envoyée par FormData, toucher à 390 px, mouvement réduit, aucune erreur. Version la plus récente utilisée selon @mdn/browser-compat-data : minLength (Chrome 40, Firefox 51, Safari 10.1) ; NodeList.forEach demande Chrome 51.
Sans JavaScript, le champ reste utilisable et le navigateur applique encore minlength et pattern à l'envoi ; seule la coche manque.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0285-root">
<div class="okmk-group">
<label class="okmk-field">
<span class="okmk-sr">Code de 5 caractères minimum</span>
<input class="okmk-input" type="text" name="code" minlength="5" autocomplete="off" placeholder="Tapez 5+ caractères">
</label>
<span class="okmk-check" aria-hidden="true">
<svg viewBox="0 0 24 24" focusable="false"><path d="M5 13l4 4L19 7"></path></svg>
</span>
<span class="okmk-sr" role="status"><span class="okmk-status-text" hidden>Valide</span></span>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Règle de validité (HTML — minlength, pattern, type, maxlength sur le champ) |
minlength="5", aucun pattern |
Sans minlength, un seul caractère suffit. Ex. : type="email" pour une adresse, pattern="[0-9]{6}" pour un code reçu par SMS. |
Couleurs de succès (CSS — --okmk-ok, --okmk-ok-field sur .fx-0285-root) |
#10b981 · vert à 5 % | Couleur du cadre et de la coche, puis teinte du fond du champ quand il est bon. |
Champ au repos (CSS — --okmk-field, --okmk-border, --okmk-focus, --okmk-text) |
blanc à 5 % · blanc à 10 % · #6366f1 · #fff | Pour un formulaire clair : --okmk-field:#fff; --okmk-border:#d6d3d1; --okmk-text:#1c1917. |
Largeur et taille du texte (CSS — --okmk-width, --okmk-font-size) |
280px · 1rem | La largeur est un maximum : le champ se resserre dans une colonne étroite. 100% pour suivre son conteneur. |
Cadre de démonstration (CSS — --okmk-bg, --okmk-min-height) |
#0a0a0f · 300px | Dans une vraie page : --okmk-bg:transparent; --okmk-min-height:0. |
Vitesse du tracé (CSS — animation: okmk-draw .4s ease .05s) |
0,4 s après 50 ms | Allongez à 0,6 s pour une coche plus visible sur un grand champ. |
Texte annoncé (HTML — .okmk-status-text) |
« Valide » | Remplacez par un message parlant : « Code postal reconnu », « Code accepté ». |
FAQ
pattern (ex. [0-9]{5}) et un minlength égal à la longueur attendue ; la coche n'apparaît que lorsque les deux sont satisfaits. Pour un IBAN avec contrôle de clé, il faut un calcul en plus : l'effet ne vérifie que la forme.minlength et pattern, avec sa propre bulle, quand le champ a été modifié par l'utilisateur. Pour piloter un bouton (comme dans la zone de danger), lisez la classe is-valid sur .okmk-group.okmk-draw n'est attachée qu'à l'état is-valid. Chaque fois que le champ redevient bon, le tracé repart de zéro ; tant qu'il reste bon, la coche ne bouge plus et rien n'est rejoué à chaque touche.
