montrant message d'erreur de validation comme info-bulle

comment afficher un message de validation comme montré ci-dessous des images sur un formulaire html.

J'ai essayé dans le Web, mais ne pouvait pas trouver comme cette validation. Donc si pour vous demander ici, peut-être quelqu'un peut m'aider avec cela.

Je veux montrer valdation message d'erreur comme indiqué dans l'image ci-dessous...

Plaire à tout le monde de m'aider...

montrant message d'erreur de validation comme info-bulle

OU COMME CETTE IMAGE CI-DESSOUS

montrant message d'erreur de validation comme info-bulle

tout le monde aime Bootstrap
wow, cette ligne pointillée verte signifie que le message de validation a fait une boucle en vol en vue. Ce serait génial.
Et où est ton code?

OriginalL'auteur user3482559 | 2014-04-11

  1. 11

    Si vous essayez pour votre propre javascript et vous êtes de nouveau pour elle , alors Il faudrait prendre un peu d'apprentissage que vous devez être conscient de jouer avec des éléments du DOM et de connaître d'autres DOM comportements. Une solution rapide serait d'utiliser la Bibliothèque de Jquery et Jquery Plugin de Validation. Il y a tellement de Jquery validateur de Formulaire qui rend l'utilisation d'info-bulle pour afficher d'erreur.

    Certains d'entre eux sont :

    http://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/
    http://jqueryvalidationunobtrusivenative.azurewebsites.net/AdvancedDemo/Tooltip
    http://jquerytools.org/demos/tooltip/form.html

    https://github.com/yairEO/validator

    https://github.com/posabsolute/jQuery-Validation-Engine

    OriginalL'auteur prabeen giri

  2. 1

    Sur l'affichage des erreurs, je le ferais comme ceci:

    • Définir la position par rapport au parent du champ.
    • Ajouter un absolu placé div à côté du champ (dans le même parent que le champ)
    • Jeu à gauche:100% ou à droite:100% sur la div
    • Définir le contenu de la div pour le message d'erreur

    Maintenant, si vous compresser ces étapes, vous obtiendrez une structure HTML comme.

    <div class="fieldWrapper" style="position: relative;">
    <input ....>
    <div class="errorMessage" style="position:absolute; left:100%;"> Error message </div>
</div>

    Si vous ne voulez pas ajouter la "fieldWrapper" divs vous pourriez mettre en haut et à gauche du message d'erreur par programme comme ceci:

    • Obtenir le offsetTop du champ et de l' offsetLeft
    • Ajouter que les décalages que l' top et left valeur de la message d'erreur.

    OriginalL'auteur Andrei