mostrando un messaggio di errore di convalida come tooltip

Question

come mostrare un messaggio di convalida come le immagini sotto riportate su un modulo html.

Ho provato in Web, ma non è stato trovato come questa convalida. Quindi, per chiederti qui, qualcuno potrebbe aiutarmi con questo.

voglio mostrare il messaggio di errore valdation come mostrato nell'immagine qui sotto in ...

Si prega di qualcuno mi può aiutare ...

---

o come questo immagine sotto

---

Answer 1

Se si sta provando per il proprio javascript e si è nuovi ad esso, quindi ci vorrebbe un po 'di apprendimento come si dovrebbe essere consapevoli giocando con elementi DOM e conoscendo altri comportamenti DOM. Una soluzione rapida sarebbe utilizzare Jquery Library e Jquery Validation Plugin. Ci sono così tanti validatori di Jquery Form che rendono l'uso di tooltip per visualizzare l'errore.

Alcuni di essi sono:

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

Answer 2

In mostra errore lo farei in questo modo:

• Set posizione rispetto al genitore del campo.
• Aggiunge un div assoluto posizionato accanto al campo (nello stesso genitore come il campo)
• sinistra insieme: 100% o di destra: 100% sul div
• Impostare il contenuto del div per il messaggio di errore

Ora se si comprimono questi passaggi si otterrebbe una struttura HTML come.

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

Se non si vuole aggiungere l'ulteriore "fieldWrapper" divs è possibile impostare la parte superiore e sinistra del messaggio di errore a livello di codice in questo modo:

• Prendi il offsetTop del campo e la offsetLeft
• Aggiungere gli offset come il valore top e left del messaggio di errore.