RequiredFieldValidator luoghi display:inline sul testo

Ho un RequiredFieldValidator con Display="Dynamic" sul mio ASP.NET WebForm. Mi hanno assegnato una classe utilizzando il CssClass proprietà. Voglio il messaggio di errore da visualizzare utilizzando display: block, così ho messo questo sulla classe css nel mio foglio di stile.

Purtroppo, il validatore luoghi un display: inline su un elemento della pagina web, effectivaly sovrascrivere il mio foglio di stile di valore.

Posso sbarazzarsi di che?

Edit:

Ho appena capito perché questo non funziona. Quando l’impostazione di Display="Dynamic" su un validatore, ha l’effetto che si pone style="display: none" il tag span durante il rendering. L’ .net javascript library poi passa lo stile inline dell’elemento tra none e inline. Che è semplicemente come la dinamica validatore opere.
Quindi, per questo per mostrare come un elemento di blocco, ho bisogno di modificare il modo in cui il client side event convalida opere. È possibile farlo?

InformationsquelleAutor Pete | 2010-02-11



8 Replies
  1. 3

    Forse questo ti può aiutare:


    http://caliberwebgroup.blogspot.com/2009/02/overriding-javascript-in-webresourceaxd.html

    • Che non funziona. Si ha semplicemente l’effetto che il lettore è visualizzato quando il caricamento della pagina (che non è quello che voglio). Quando cerco di inviare, cambia lo stile a “inline” (se la convalida non riesce). Vedere modificato il mio post per il motivo per cui questo accade.
    • Ok, non prestando molta attenzione! Ho aggiornato il mio post, forse può aiutare!
    • Hey. Grazie per l’aggiornamento. Non è la più bella soluzione, perché a livello globale colpisce tutti i validatori, e dipende dalla roba che i dettagli di implementazione del .NET framework. Ma funziona (dà il risultato desiderato). Anche se una bella soluzione potrebbe essere quella di cambiare tra passare da una classe CSS. In questo modo si ha almeno la possibilità di decidere un pr. validatore di base se dovrebbe essere il blocco o in linea.
    • Troppo complicato e invasiva. Io ho risolto applicando Blakomen soluzione
    • Si potrebbe rendere la vostra risposta in piedi da solo senza il link, per favore?
  2. 34

    Utilizzando i CSS selettore di attributo e !importante l’ho fatto. Ho dovuto usare il “contiene” selettore di farlo funzionare in FF, ma ora l’ho provato in IE10, FF e Chrome e finora sta funzionando. È davvero semplice.
    Ecco un esempio di un validatore 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>

    Successivo ho uno stile per valerror.

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

    Che è. Come funziona: quando le modifiche span style da “display:none” a “display:inline” il selettore di attributo nel campo di calci e la costringe a essere un blocco. Hai solo bisogno di fare UN CSS voce come quella di cui sopra e assicuratevi di fare ogni validatore, che classe.

    • Mi piace questa soluzione. Non inquinare il mio markup, script o codebehind e solo. I vecchi browser può vivere senza di essa -almeno nel mio caso.
    • Con l’aggiunta del div e separato styling, è compatibile con i browser più vecchi, troppo.
    • Ha funzionato per me, stavo cercando esatto stesso problema
  3. 29

    Estremamente sporca soluzione che ho usato una volta (che io non sono orgoglioso, ma ha funzionato) è stato quello 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 non sarà effettivamente apparire come display:block nella maggior parte dei casi.

    Detto che era sporca!

    • Io non sono sicuro perché si chiama proprio come soluzione “sporca”. Questo non è sporca, questo è il modo GIUSTO di come farlo. Che cosa è “sporca” è l’idiota soluzione con il webresource.axd accettate risposta.
    • Avvolgere il validatori in un div danno solo il “capo” effetto che si ottiene da elementi a livello di blocco. Assicurarsi che si dispone di un validatore con il testo che si estende su più righe, dare un colore di sfondo e vedrete cosa intendo. Reale livello di blocco degli elementi di alcune proprietà non è possibile replicare avvolgendo elementi in un blocco.
    • il mio tipo di problema! semplice ed efficace.
  4. 2

    Ho trovato una soluzione che funziona ignorando il .net ValidatorUpdateDisplay() metodo in JavaScript, e deve essere messo prima della chiusura del tag body.

    <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>
    • IMO, questa è la soluzione migliore
  5. 1

    Stavo per provare un css soluzione, ma dopo aver letto quello che hai postato (aggiornato), credo di bastone con la mia. Ho già avuto a configurare il mio validatore sul server per altri motivi, per cui mi limito a verificare il tipo di controllo del “controlToValidate”, quindi per controlli di tipo textbox, ho aggiunto un <br /> tag di fronte il messaggio.

    ad esempio

    //Inline (if configured)

    myvalidator.Text = "<br />My message";

    //Normal message and validation summary (if configured)

    myvalidator.ErrorMessage = "My Message";

    Questo mantiene l’interruzione di riga, dal rendering in il sommario di convalida, mentre ancora alla ricerca della giusta per il mio inline messaggi.

    Penso Blackomen approccio è anche un bene, ma deve essere applicato in modo selettivo e.

  6. 1

    Una possibilità è quella di galleggiare l’elemento per rendere l’elemento di “agire più come un blocco”.

    HTML

    <div class="form-group clearfix">
      <asp:CustomValidator runat="server" Display="Dynamic" CssClass="help-block" />
    </div>

    CSS

    span.help-block {
      float: left;
      width: 100%;
    }
  7. 0

    C’è una soluzione più semplice, adesso e in futuro.

    1) Aggiungere una classe al validatore

    2) Utilizzare jquery per aggiungere un elemento interno al validatore span o utilizzare javascript

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

    3) aggiungi css per “blocco” di classe “display:block”

  8. 0

    Basta impostare float:left per il tuo css

    Utilizzando la soluzione di cui sopra se il tuo campo obbligatorio visualizza prima il vostro controllo, quindi semplicemente aggiungere nuova linea di tag <br/> tra il controllo e richiesto field validator

Lascia un commento