HTML attribut d'événement oninvalid

L'attribut oninvalid en HTML : Définition

L'attribut oninvalid est utilisé pour spécifier le code JavaScript à exécuter lorsqu'un élément de formulaire devient invalide.

Définition

L'attribut oninvalid est un événement qui se déclenche lorsqu'une tentative est faite pour soumettre un formulaire contenant un champ invalide.

Syntaxe

La syntaxe de l'attribut oninvalid est la suivante :

<element oninvalid="maFonction()">

maFonction() représente la fonction JavaScript à exécuter lorsque l'élément devient invalide.

Exemples pratiques d'utilisation

Exemple 1: Alerte en cas de champ invalide

Le code suivant est un exemple d'utilisation de l'attribut oninvalid pour fournir une alerte lorsque le champ d'utilisateur est laissé vide. Cependant, vous pourriez améliorer encore davantage l'expérience utilisateur en personnalisant le message d'erreur ou en ajoutant des styles CSS pour rendre l'alerte plus esthétique.

Considérons un formulaire simple avec un champ obligatoire :

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulaire d'inscription</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 400px;
            margin: 20px auto;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        label {
            margin-bottom: 8px;
        }
        input {
            padding: 8px;
            margin-bottom: 16px;
        }
        input[type="submit"] {
            background-color: #4caf50;
            color: white;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

    <h1>Formulaire d'inscription</h1>

    <form>
        <label for="username">Nom d'utilisateur :</label>
        <input type="text" id="username" required oninvalid="customInvalid()">
        <input type="submit" value="Soumettre">
    </form>
    <p>Si vous cliquez sur soumettre sans remplir le champ de texte, un message d'alerte apparaîtra.</p>
    <script>
        function customInvalid() {
            var usernameInput = document.getElementById('username');
            if (usernameInput.validity.valueMissing) {
                usernameInput.setCustomValidity("Veuillez s'il vous plaît saisir saisir un nom d'utilisateur.");
            }
        }
    </script>

</body>
</html>

Dans cette version, quelques styles CSS sont ajoutés pour améliorer l'apparence du formulaire, et également une fonction JavaScript (customInvalid()) est utilisée pour personnaliser le message d'erreur en utilisant la méthode setCustomValidity(). Cela permet de fournir un message plus informatif et adapté à la validation du champ d'utilisateur.

Conseils et astuces

Utilisez l'attribut required en conjonction avec oninvalid pour déclencher l'événement uniquement sur les champs obligatoires.
Personnalisez le message d'alerte ou appelez une fonction spécifique pour gérer les validations personnalisées.

Expérimentez avec l'attribut oninvalid pour améliorer l'expérience utilisateur dans vos formulaires HTML en fournissant des messages d'erreur pertinents et en guidant les utilisateurs lors de la saisie de données.