3248 sujets

Critiques de vos sites: code et design

Validator 2.0.2 sur npm

Modérateur
Bonjour tout le monde,

Nouvelle version de Validator disponible !

Je suis fier de vous présenter la version 2.0.2 de Validator, une librairie légère et puissante pour valider vos formulaires et données en JavaScript/TypeScript.

Pourquoi choisir Validator ?
- Validation simple et intuitive, que ce soit via HTML ou JavaScript.
- Prise en charge des règles personnalisées et des middlewares pour une flexibilité totale.
- Léger (seulement 16 Ko) et facile à intégrer dans vos projets.

Disponible sur npm :
https://www.npmjs.com/package/@niuxe/validator/v/2.0.2

Documentation complète :
https://github.com/niux3/validator/tree/master/docs

N'hésitez pas à essayer la librairie et à me faire part de vos commentaires. Si vous trouvez cela utile, pensez à saisir des étoiles sur le projet sur GitHub ou à le partager autour de vous !
Modifié par niuxe (13 Mar 2025 - 18:31)
Modérateur
Ce matin, j'ai fait une mise à jour de la librairie. Oups, j'avais oublié de gérer les attributs aria-invalid et aria-describeby. La nouvelle version est 2.0.3. J'ai fait cette annonce sans vraiment donner d'exemple d'utilisation.

Pour utiliser cette librairie en mode simple :
le html : 

<form action="contact" method="post" class="formToValidate">
    <label>
        <span>email</span>
        <input type="text" name="email" id="email" required>
    </label>
    <div id="messageEmail"></div>
    <label>
        <span>mot de passe</span>
        <input type="password" name="password" id="password" class="require">
    </label>
    <div class="submit input">
        <input type="submit" class="button expanded" name="send" value="envoyer">
    </div>
</form>
<script type="module" src="/static/js/validator.min.js"></script>
<script type="module" src="/static/js/app.js"></script>


Vous remarquerez qu'il y a tantôt l'attribut required et la class require. Je convertis tous les champs avec l'attribut required en class require lors de l'initialisation de Validator.

règles validation en JS : (app.js)

document.addEventListener('DOMContentLoaded', event =>{
    let defaultErrorMessage = "Ce champ ne doit pas être vide",
        optionValidator = {
        "selector" : ".formToValidate", // par default form
        "fields" : {
            "email" : {
                "target" : {
                    "error" : "#messageEmail",
                },
                "isnotempty":{
                    "error" : defaultErrorMessage
                },
                "isemail":{
                    "error" : "Ce champ doit avoir la bonne saisie (dom@dom.com)"
                }
            },
            "password" : {
                "isnotempty":{
                    "error" : defaultErrorMessage
                },
            },
        }
    },
    validate = new Validator(optionValidator)

    validate.form()
})


Si on souhaite valider le formulaire via des attributs html. C'est utile lorsque l'application est multilingues : 

<html lang="en">
    <head>
        <!-- .... -->
    </head>
    <body>
        <form action="contact" method="post">
            <label>
                <span>email</span>
                <input type="text" name="email" id="email" required data-validate-rules="isnotempty isemail" data-error-isnotempty="this field is required" data-error-isemail="this email is not valid" data-validate-target-error="#messageEmail">
            </label>
            <div id="messageEmail"></div>
            <label>
                <span>password</span>
                <input type="password" name="password" id="password" class="require" data-validate-rules="isnotempty" data-error-isnotempty="this field is required">
            </label>
            <div class="submit input">
                <input type="submit" class="button expanded" name="send" value="envoyer">
            </div>
        </form>
        <script type="module" src="/static/js/validator.min.js"></script>
        <script type="module" src="/static/js/app.js"></script>
    </body>
</html>


(app.js)

let validate = new Validator()
validate.form()

Modifié par niuxe (18 Mar 2025 - 14:52)
Prévenir un modérateur
Répondre au sujet
Aller à