asp.net - start - asp net web forms samples



Display posti RequiredFieldValidator: in linea sul testo (6)

Basta impostare float: lasciato al tuo css

Utilizzando la soluzione di cui sopra se il campo richiesto viene visualizzato prima del controllo, è sufficiente aggiungere un nuovo tag di riga <br/> tra il controllo e il validatore di campo richiesto

Ho un RequiredFieldValidator con Display="Dynamic" sul mio Web Form di ASP.NET. Ho assegnato una classe usando la proprietà CssClass . Voglio che il messaggio di errore venga visualizzato utilizzando display: block , quindi l'ho inserito nella classe css nel mio foglio di stile.

Sfortunatamente, il validatore posiziona una visualizzazione: in linea sull'elemento sulla pagina Web, effettuando l'override del valore del foglio di stile.

Posso sbarazzarmene?

Modificare:

Ho appena capito perché questo non funziona. Quando si imposta Display="Dynamic" su un validatore, ha l'effetto di impostare style="display: none" sul tag span durante il rendering. La libreria javascript .net cambia quindi lo stile in linea dell'elemento tra none e inline . Questo è semplicemente come funziona il validatore dinamico. Quindi, affinché questo possa essere visualizzato come elemento di blocco, dovrò modificare il modo in cui funziona la convalida dell'evento lato client. è possibile farlo?


C'è una soluzione semplice che funzionerà ora e in futuro.

1) Aggiungi una classe al validatore
2) Usa jquery per aggiungere un elemento interno allo span del validatore o usa javascript

function wrapValidators() {

    $('.input-error').wrapInner('<span class="block" />');
}

3) aggiungi css alla visualizzazione 'block' class ": block"


Ho trovato una soluzione che funziona sovrascrivendo il metodo .net ValidatorUpdateDisplay() in JavaScript e deve essere inserito prima del tag corpo chiuso.

<script type="text/javascript">
    function ValidatorUpdateDisplay(val)
    {
        if (typeof (val.display) == "string")
        {
            if (val.display == "None")
            {
                return;
            }
            if (val.display == "Dynamic")
            {
                val.style.display = val.isvalid ? "none" : "block";
                return;
            }
        }
        if ((navigator.userAgent.indexOf("Mac") > -1) && (navigator.userAgent.indexOf("MSIE") > -1))
        {
            val.style.display = "inline";
        }
        val.style.visibility = val.isvalid ? "hidden" : "visible";
    } 
</script>

Stavo per provare una soluzione css, ma dopo aver letto ciò che hai pubblicato (aggiornato), penso che potrei restare con il mio. Ho già dovuto configurare il mio validatore sul server per altri motivi, quindi ho solo controllato il tipo di controllo di "controlToValidate", quindi per i controlli di tipo textbox, aggiungo un tag <br /> alla parte anteriore del messaggio.

per esempio
// Inline (if configured)
myvalidator.Text = "<br />My message";

// Normal message and validation summary (if configured)
myvalidator.ErrorMessage = "My Message";

Ciò mantiene l'interruzione di riga dal rendering nel riepilogo di convalida, pur continuando a cercare i miei messaggi incorporati.

Penso che anche l'approccio di Blackomen sia buono, ma deve essere applicato selettivamente.


Una soluzione estremamente hacky che ho usato una volta (di cui non sono orgoglioso, ma ha funzionato) era di avvolgere il RequiredFieldValidator in un <div>, che è un elemento di blocco; quindi, anche se il tuo RequiredFieldValidator è in linea, è all'interno di un blocco div in modo che apparirà effettivamente come display: blocco nella maggior parte dei casi.

Ti ho detto che era hacky!


Usando il selettore di attributi CSS e! Importante l'ho fatto. Ho dovuto usare il selettore "contiene" per farlo funzionare in FF, ma ora l'ho testato su IE10, FF e Chrome e finora funziona. È davvero semplice Ecco un validatore di esempio nella mia pagina aspx:

<asp:RequiredFieldValidator runat="server" ID="rfvRequired" ErrorMessage="This is required.<br/>This is line 2" ControlToValidate="tbRequired" ValidationGroup="CommonAttributesValidationGroup" SetFocusOnError="True" CssClass="valerror" Display="Dynamic"></asp:RequiredFieldValidator>

Successivamente ho uno stile per valerror.

span.valerror[style*="inline"]
{
    display:block !important;
    background-color: Yellow;
    border: 1px solid #cccccc;
    font-size:.9em;
}

È così. Come funziona: quando lo span cambia lo stile da "display: none" a "display: inline" il selettore di attributo sullo span interviene e lo costringe a essere un blocco. Devi solo fare una voce CSS come quella sopra e assicurarti di fare ogni validatore in classe.





webforms