jQuery sovrascrive la visualizzazione del messaggio di errore della convalida di default (Css) Popup / Tooltip come

Sto cercando di superare l’etichetta del messaggio di errore predefinito con un div anziché un’etichetta. Ho guardato anche a questo post e ho imparato come farlo, ma i miei limiti con i CSS mi perseguitano. Come posso visualizzare questo come alcuni di questi esempi:

Esempio n. 1 (Dojo) : deve digitare un input non valido per visualizzare l’errore
Esempio # 2

Ecco alcuni esempi di codice che sostituiscono l’etichetta dell’errore con un elemento div

$(document).ready(function(){ $("#myForm").validate({ rules: { "elem.1": { required: true, digits: true }, "elem.2": { required: true } }, errorElement: "div" }); }); 

Ora sono in perdita sulla parte css ma qui è:

 div.error { position:absolute; margin-top:-21px; margin-left:150px; border:2px solid #C0C097; background-color:#fff; color:white; padding:3px; text-align:left; z-index:1; color:#333333; font:100% arial,helvetica,clean,sans-serif; font-size:15px; font-weight:bold; } 

AGGIORNARE:

Va bene sto usando questo codice ora ma l’immagine e il posizionamento sul popup è più grande del bordo, può essere regolato per essere dinamico è l’altezza?

 if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') { element = element.parent(); offset = element.offset(); error.insertBefore(element) error.addClass('message'); // add a class to the wrapper error.css('position', 'absolute'); error.css('left', offset.left + element.outerWidth()); error.css('top', offset.top - (element.height() / 2)); // Not working for Radio, displays towards the bottom of the element. also need to test with checkbox } else { // Error placement for single elements offset = element.offset(); error.insertBefore(element) error.addClass('message'); // add a class to the wrapper error.css('position', 'absolute'); error.css('left', offset.left + element.outerWidth()); error.css('top', offset.top - (element.height() / 2)); } 

il css è lo stesso di sotto (il codice css)

html

       

È ansible utilizzare l’opzione errorPlacement per sovrascrivere la visualizzazione del messaggio di errore con pochi css. Perché css da solo non sarà sufficiente per produrre l’effetto che ti serve.

 $(document).ready(function(){ $("#myForm").validate({ rules: { "elem.1": { required: true, digits: true }, "elem.2": { required: true } }, errorElement: "div", wrapper: "div", // a wrapper around the error message errorPlacement: function(error, element) { offset = element.offset(); error.insertBefore(element) error.addClass('message'); // add a class to the wrapper error.css('position', 'absolute'); error.css('left', offset.left + element.outerWidth()); error.css('top', offset.top); } }); }); 

Puoi giocare con gli attributi css di sinistra e top per mostrare il messaggio di errore in alto, a sinistra, a destra o in fondo all’elemento. Ad esempio per mostrare l’errore in alto:

  errorPlacement: function(error, element) { element.before(error); offset = element.offset(); error.css('left', offset.left); error.css('top', offset.top - element.outerHeight()); } 

E così via. Puoi fare riferimento alla documentazione di jQuery su CSS per ulteriori opzioni.

Ecco il css che ho usato. Il risultato sembra esattamente come quello che vuoi. Con il minor numero ansible di CSS:

 div.message{ background: transparent url(msg_arrow.gif) no-repeat scroll left center; padding-left: 7px; } div.error{ background-color:#F3E6E6; border-color: #924949; border-style: solid solid solid none; border-width: 2px; padding: 5px; } 

Ed ecco l’immagine di sfondo di cui hai bisogno:

alt text http://sandbox.scriptiny.com/messages/images/msg_arrow.gif

Se si desidera che il messaggio di errore venga visualizzato dopo un gruppo di opzioni o campi. Quindi raggruppare tutti quegli elementi all’interno di un contenitore come “div” o “fieldset”. Aggiungi una class speciale a tutti loro ‘gruppo’ per esempio. E aggiungi quanto segue all’inizio della funzione errorPlacement:

 errorPlacement: function(error, element) { if (element.hasClass('group')){ element = element.parent(); } ...// continue as previously explained 

Se desideri gestire casi specifici, puoi utilizzare attr invece:

 if (element.attr('type') == 'radio'){ element = element.parent(); } 

Questo dovrebbe essere sufficiente per visualizzare il messaggio di errore accanto all’elemento genitore.

Potrebbe essere necessario modificare la larghezza dell’elemento genitore per essere inferiore al 100%.


Ho provato il tuo codice e funziona perfettamente bene per me. Ecco un’anteprima: alt text

Ho appena apportato una piccola modifica al padding del messaggio per adattarlo alla linea:

 div.error { padding: 2px 5px; } 

È ansible modificare quei numeri per aumentare / diminuire il padding in alto / in basso o a sinistra / a destra. È inoltre ansible aggiungere altezza e larghezza al messaggio di errore. Se hai ancora problemi, prova a sostituire lo span con un div

 

E quindi dare al contenitore una larghezza (questo è molto importante)

 div.group { width: 50px; /* or any other value */ } 

Informazioni sulla pagina vuota. Come ho detto ho provato il tuo codice e funziona per me. Potrebbe essere qualcos’altro nel tuo codice che sta causando il problema.

Io uso jQuery BeautyTips per ottenere il piccolo effetto bolla di cui parli. Non uso il plug-in Validation, quindi non posso davvero aiutarci molto, ma è molto facile da stile e mostrare i BeautyTips. Dovresti darci un’occhiata. Non è così semplice come le regole CSS, temo, dato che è necessario utilizzare l’elemento canvas e includere un file javascript in più per IE per giocare con esso.

Poche cose:

In primo luogo, non penso che tu abbia davvero bisogno di un errore di convalida per un fieldset radio perché potresti semplicemente avere uno dei campi controllati per impostazione predefinita. La maggior parte delle persone preferirebbe correggere qualcosa, quindi fornire qualcosa. Per esempio:

  Age: (*) 12 - 18 | () 19 - 30 | 31 - 50 

è più probabile che venga cambiata la risposta giusta in quanto la persona NON vuole che vada al valore predefinito. Se lo vedono in bianco, è più probabile che pensino “non sono affari tuoi” e lo saltano.

Secondo, sono stato in grado di ottenere l’effetto che penso tu stia volendo senza proprietà di posizionamento. Basta aggiungere il padding direttamente al modulo (o al div del modulo, qualunque sia) per fornire spazio sufficiente per il tuo errore e assicurarti che il tuo errore si adatti a quell’area. Quindi, hai una class di css preimpostata chiamata “error” e la imposti come margine negativo-top approssimativamente l’altezza del campo di input e un margine sinistro sulla distanza da sinistra a dove il padding è a destra dovrebbe iniziare. Ho provato questo, non è grande, ma funziona con tre proprietà e non richiede galleggianti o assoluti:

   

Sfortunatamente non posso commentare con la mia reputazione di novizio, ma ho una soluzione per il problema dello schermo che diventa bianco, o almeno questo è ciò che ha funzionato per me. Invece di impostare la class wrapper all’interno della funzione errorPlacement, impostala immediatamente quando imposti il ​​tipo di wrapper.

 $('#myForm').validate({ errorElement: "div", wrapper: "div class=\"message\"", errorPlacement: function(error, element) { offset = element.offset(); error.insertBefore(element); //error.addClass('message'); // add a class to the wrapper error.css('position', 'absolute'); error.css('left', offset.left + element.outerWidth() + 5); error.css('top', offset.top - 3); } 

});

Presumo che farlo in questo modo permetta al validatore di sapere quali elementi div rimuovere, invece di tutti. Ha funzionato per me, ma non sono del tutto sicuro del perché, quindi se qualcuno potesse elaborarlo potrebbe aiutare gli altri ad uscire.

Questa risposta mi ha davvero aiutato, nel mio caso ho dovuto filtrare alcuni elementi e avere un alligment speciale sul loro errore div,

 errorPlacement:function(error,element) { if (element.attr("id") == "special_element") { // special align } else { // default error scheme error.insertAfter(element); } } 

Aggiungi il seguente css al tuo metodo .validate per cambiare il css o la funzionalità

  errorElement: "div", wrapper: "div", errorPlacement: function(error, element) { offset = element.offset(); error.insertAfter(element) error.css('color','red'); } 

Se potessi fornire qualche motivo per spiegare perché è necessario sostituire l’etichetta con un div, sarebbe sicuramente di aiuto …

Inoltre, potresti incollare un campione che sarebbe utile ( http://dpaste.com/ o http://pastebin.com/ )