Come faccio a evidenziare un bordo della casella di testo in rosso quando è necessario?

Di proprietà ai quali faccio a usare sul campo il validatore di controllo per rendere la casella di testo in rosso se c’è un errore di convalida?

Ecco il mio codice:

<asp:Label ID="lblFirstName" runat="server" AssociatedControlID="txtFirstName" Text="First Name:" CssClass="reg-labels" />
<br />
<asp:TextBox ID="txtFirstName" runat="server" CausesValidation="true" MaxLength="60" CssClass="standard_width"/>
<asp:RequiredFieldValidator ControlToValidate="txtFirstName" runat="server" ID="valFirstName" ValidationGroup="grpRegistration" ErrorMessage="First Name is required." Text="*" />
Si potrebbe utilizzare un ValidatorCalloutExtender, ha un HighlightCssClass proprietà per questo.
Fondamentalmente ci dovrebbe essere un .axd file renderizzato per gestire tutti convalida. Tutto ciò che serve è controllare dove sono la visualizzazione del messaggio di errore e aggiungere la nuova classe generica highlight-error
Aggiornata la mia risposta con un codice di lavoro

OriginaleL’autore Greg Finzer | 2014-01-20

5 Replies
  1. 16

    ASP.Net web form internamente usa Javascript frameworka trova a aspnet_client\{0}\{1} cartella di gestire la validazione, etc. Essi sono fondamentalmente determinato dalla struttura ClientScriptsLocation

    Provare sovrascrivere l’impostazione predefinita quadro funzione mantenendo nella pagina include ulteriori riga per impostare la control_to_validate colore

    document.getElmentById(val.controltovalidate).style.border='1px solid red';

    <asp:TextBox ID="txtFirstName" runat="server" CausesValidation="true" MaxLength="60"
        CssClass="standard_width" />
    <asp:RequiredFieldValidator ControlToValidate="txtFirstName" runat="server" ID="valFirstName" ValidationGroup="grpRegistration" ErrorMessage="First Name is required." Text="*" />
    <asp:Button Text="Super" ID="btnSubmit" CausesValidation="true" runat="server" />

    JS

    <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" : "inline";
                    return;
                }
    
            }
            val.style.visibility = val.isvalid ? "hidden" : "visible";
            if (val.isvalid) {
                document.getElementById(val.controltovalidate).style.border = '1px solid #333';
            }
            else {
                document.getElementById(val.controltovalidate).style.border = '1px solid red';
            }          
        }
    </script>
    Da dove chiamano ValidatorUpdateDisplay() funzione?
    non chiamarlo, Asp.Net che fa per voi.
    Ho testato la parte inferiore dello script (da val.style.visibility = ... alla fine), perché ho solo bisogno di un bordo rosso funzione, senza la visualizzazione del messaggio di errore. Questa soluzione è un giusto approccio, tuttavia, non sarà il lavoro in presenza di più i validatori un controllo, perché l’ultima validator-risultato deciderà per il bordo o no, assolutamente, non diminuirà il bordo rosso forse. C’è un modo per mostrare il bordo rosso quando c’è un risultato non valido di qualsiasi validatore di controllo? Non voglio utilizzare un controllo personalizzato che mi costringe anche per lavorare di più per qualsiasi forma di gruppo.
    se io uso due Validatore per un controllo, il suo secondo validator e applicare i css basato sulla seconda validator,non prima. Sto usando un Campo Obbligatorio Validator e Validatore di Espressioni Regolari per una casella di testo, mostrando il suo valido però non ho inserito il valore, mostrando come non validi solo se secondo validator (Validatore di Espressioni Regolari) non riesce. Come risolvere ? Qualsiasi soluzione?
    controllare il viewsource della pagina che possono avere alcuni .axd file contenente il codice javascript framework di validazione. Copiare e rinominare .js, da inserire nella tua pagina utilizzando il tag script. Significa che ora il file di script è l’assunzione di una maggiore priorità rispetto .axd file incluso da asp.net. Quando si ha l’ .js file, è possibile inserire un debugger e avere un controllo di come è in esecuzione. Il debug che vi aiuterà, esattamente dove avete bisogno di cambiare. Il suo solo un suggerimento.

    OriginaleL’autore Murali Murugesan

  2. 10

    Senza sovraccaricare nulla, dare il vostro <asp:*Validator tag CssClass="garbage" attributo.

    Nel tuo foglio di stile, creare

    .garbage {
        display: none;
    }
    .garbage[style*=visible] + input,
    .garbage[style*=visible] + select,
    .garbage[style*=visible] + textarea {
        background-color: #ffcccc;
        border: 1px solid #ff0000;
    }

    e qualsiasi forma di controllo, immediatamente preceduto da un validatore sarà evidenziata su dati non validi.

    EDIT:

    Ho visto un paio di metodi per imporre un aggiornamento in Cromo, tra cui un puro css soluzione: transform: translateZ(0);

    Questo funziona perfettamente, anche con più validatori. Ho dovuto rimuovere il Display=”Dynamic” da mio validatori. Semplice ed elegante.
    Se si desidera utilizzare il Display=”Dynamic”, basta cambiare .garbage[style*=visible] per .garbage[style*=inline].
    Non mi pare di applicare lo stile fino a quando ho mouse sopra o fare clic sulla casella di testo. Tutte le idee perché?
    Penso che a che fare con il renderer di ottimizzazione. Si può andare in giro chiamando .hide() e .show() per forzare l’aggiornamento.
    Questa opzione è davvero bella!!! ma ricordate di aggiungere il validatore prima che l’elemento che si desidera controllare.

    OriginaleL’autore Patrick

  3. 2

    Murali risposta funziona alla grande, ma ho lanciato una versione jQuery per me se qualcuno è interessato.

    Sulla base della documentazione ufficiale (https://msdn.microsoft.com/en-us/library/yb52a4x0.aspx), sono stato in grado di ottenere ogni validatore e controllare per vedere se è isvalid, e se non, utilizzare il errormessage proprietà per popolare il mio proprio sistema di notifica (setStatusMessage() è una funzione che ho scritto, sentitevi liberi di utilizzare qualsiasi altro tipo di messaggio di stato prompt, come alert() o roll your own).

    /*
    *   Validation Catcher - Sean D Kendle - 9/24/2015
    *   Catch validation events and add to status messages system
    */
    $(document).on("submit", function () {
        $.each(Page_Validators, function (i, v) {
            var strControlToValidateID = v.controltovalidate;
            var $controlToValidate = $("#" + strControlToValidateID);
    
            var arrInvalidControls = new Array(); //collection of all invalid field ids for later
    
            if (!v.isvalid) {
                $controlToValidate.addClass("error"); //custom error class, optional
                $controlToValidate.css("border-color", "#D00"); //manually set border-color per OP's question
    
                $(".error").eq(0).focus(); /*set focus to top-most invalid field on error, or you can use the v.focusOnError property to check if validator has this set (string "t" if true), but I don't want to have to set this every time*/
    
                arrInvalidControls.push(strControlToValidateID);  //collect all invalid field ids for later
    
                $(v).addClass("redtext"); //custom class - allows me to make all errors red without having to add a ForeColor property to every validator
    
                setStatusMessage(v.errormessage, "red", -1); //setStatusMessage is a function I wrote, replace with another alert system if desired, or delete this line
            } else {
                /*the following prevents control being seen as valid if there are two or more validators for the control - example:  required field validator, then custom or regex validator (first would be invalid, second would be valid for empty field)*/
                if (!$.inArray(strControlToValidateID, arrInvalidControls)) {
                    $controlToValidate.removeClass("error");
                    $controlToValidate.css("border-color", "");
                } else {
                    //console.log(strControlToValidateID + " is already invalid.");
                }
            }
        });
    });

    Spero che questo aiuta qualcuno!

    molto utile.Mi chiedo perché diventa così molto basso livello di attenzione
    Grazie, @ImanAbidi! La ringrazio per le cortesi parole.

    OriginaleL’autore Sean Kendle

  4. 1

    Bene, per la tua delusione non c’è un modo diretto (cfr https://stackoverflow.com/a/5249021/145682)

    Tuttavia, si può fare uso di un CustomValidator. Qui è un modo per definirlo:

    <asp:TextBox ID="txtbx" runat="server"></asp:TextBox>
    <asp:CustomValidator ID="customValidator" 
        runat="server" ValidationGroup="submit" ControlToValidate="txtbx" 
        ClientValidationFunction="foo" ErrorMessage="*"></asp:CustomValidator>

    Prendere nota della ClientValidationFunction. Deve essere scritto come segue:

        function foo(sender, e) {
            var value = e.Value;
            console.log('Value: ', e.Value);
            var ctrlid = sender.controltovalidate;
            var targetControl = document.getElementById(ctrlid);
            if (vowels.indexOf(value[0].toLowerCase()) == -1) {
                console.log('true-executed');
                e.isValid = false;
                targetControl.style.borderColor = 'red';
            }
            else {
                console.log('else-executed');
                e.isValid = true;
                targetControl.style.borderColor = '';
            }
        }

    Il controltovalidate proprietà di sender vi darà l’id del controllo che si sta cercando; in altre parole, il vostro ControlToValidate. E, Value proprietà di e dovrebbe dare il bersaglio valore del controllo.

    L’altra opzione è che si può scrivere il proprio server di controllo per fare il lavoro: http://msdn.microsoft.com/en-us/library/aa719624(v=vs. 71).aspx

    Ma è necessario che ogni luogo è necessario aggiungere ClientValidationFunction
    sì, devi specificare ClientValidationFunction per ogni CustomValidator si aggiunge. Tuttavia, la funzione js che le chiamate possono essere una singola funzione, che è scritto in un modo di gestire la logica di convalida come necessario. L’alternativa è quella di creare il proprio controllo di validazione. Ho fatto riferimento a un articolo di msdn che mostra come farlo.

    OriginaleL’autore deostroll

  5. 1

    Murali risposta lavorato per me, come le modifiche dei dati, ma su un postback tutti i campi resi come se non c’erano errori di convalida. Ho trovato che ASP.NET pigro-carichi ValidatorUpdateDisplay, in modo che il lato client override non ha effetto fino a dopo è già superato il suo onload di convalida. Sto indovinando che ci sia una versione o un’implementazione differenza che mi ha bloccato qui, ma altre soluzioni (tra cui un paio con i CSS) non funzionava.

    Alla fine ho trovato una soluzione che combina Murali risposta con Dillie-O soluzione da qui: Cambiare il Colore delle caselle di Testo utilizzando Richiesto Field Validator. Non Extender Controlli, Si Prega Di

    <div class="pad-left">
      <asp:CompareValidator ID="comvIncTaxable" runat="server" ControlToValidate="tbIncTaxable" Display="Dynamic" Operator="DataTypeCheck" Type="Currency" CssClass="red-border"
         ErrorMessage="Please enter a currency value.">
         <span></span>
      </asp:CompareValidator>
      <asp:TextBox runat="server" ID="tbIncTaxable"></asp:TextBox>
    </div>
    
    <script type="text/javascript">
    $(function () {
        setValidatedBordersOnLoad();
    });
    function ValidatorUpdateDisplay(val) {
        if (typeof (val.display) == "string") {
            if (val.display == "None") {
                return;
            }
            if (val.display == "Dynamic") {
                val.style.display = val.isvalid ? "none" : "inline";
                if (val.className == 'red-border' && val.controltovalidate) {
                    if (val.isvalid) {
                        document.getElementById(val.controltovalidate).style.border = '1px solid #ccc';
                    }
                    else {
                        document.getElementById(val.controltovalidate).style.border = '1px solid red';
                    }
                }
                return;
            }
        }
        val.style.visibility = val.isvalid ? "hidden" : "visible";
    }
    
    function setValidatedBordersOnLoad()
    {
        for (var i = 0; i < Page_Validators.length; i++)
        {
            var val = Page_Validators[i];
            if (val.className == 'red-border' && val.controltovalidate) {
                var ctrl = document.getElementById(val.controltovalidate);
                if (ctrl != null && ctrl.style != null) {
                    if (!val.isvalid)
                        ctrl.style.border = '1px solid red';
                    else
                        ctrl.style.border = '1px solid #ccc';
                }
            }
        }
    }
    </script>

    La cosa bella di questa soluzione è che permette di cherry-pick che validatori ottenere questo speciale trattamento, semplicemente aggiungendo CssClass='red-border' al validatore. Nel mio caso, ho solo voluto questo comportamento sui campi all’interno di una griglia specifica in cui il posizionamento delle cellule non dovrebbe cambiare, ma volevo utilizzare la casella di funzionalità altrove nel modulo.

    OriginaleL’autore Kenbo

Lascia un commento