oujood.com

Tutoriel sur l'attribut oninvalid en HTML

Ce tutoriel comprend la définition de l'attribut oninvalid, sa syntaxe, des exemples pratiques d'utilisation, ainsi que des conseils et astuces pour son utilisation

chercher |

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.


Appui de navigateur

Internet Explorer FirefoxOpera Google ChromeSafari
L'attribut d'événement oninvalid est pris en charge dans tous les principaux navigateurs.


 Retour à la Liste attribut d'événement 

    
Accueil du site


Par carabde 10 mars 2014



Voir aussi nos tutoriel :

Balise area

Définit une zone dans une image-carte

Balise universelle div

Définit une section dans un document

fonction levenshtein, levenshtein

Calcule la distance Levenshtein entre deux chaînes