Voici en plus abstrait une nouvelle façon de mettre en évidence les champs non valides d'un formulaire. Les fonctionnalités de base des contrôles Validators sont restreintes. Elles ne permettent pas de changer les styles du contrôles en erreur.

Voici une portion de javascript qui met un cadre rouge autour des champs non valides. Très intéressant car on conserve la philosophie et l'usage des contrôles Validators. Il suffit de coller cette portion de code en bas de votre page et le tour est joué.

Si vous souhaité changer le style de mise en erreur, vous devez changer deux ligne : document.getElementById(val.controltovalidate).style.borderColor = 'red'; et un peu plus bas document.getElementById(val.controltovalidate).style.borderColor = '';

Idéalement, créez une classe css "Error", cela vous permettra de ne plus toucher au code.

<script type="text/javascript">
    <!--
        // "Pointeur" sur la fonction à remplacer. On va devoir la conserver pour la déclencher en amont.
        var OriginalValidatorUpdateDisplay = null;

        // Si la function de validation existe
        // ValidatorUpdateDisplay est la function qui est déclenchée lorsque le contrôle change 
        if (typeof (ValidatorUpdateDisplay) == 'function') {
            
            OriginalValidatorUpdateDisplay = ValidatorUpdateDisplay;            // On garde l'ancienne fonction
            ValidatorUpdateDisplay = NewValidatorUpdateDisplay;                 // On "remplace" la fonction declenchée par le système
        }


        /// <summary>
        /// Remplace la fonction d'origine "ValidatorUpdateDisplay" appelé par le système lorsqu'un contrôle change
        /// Elle parcours les validators pour s'assurer qu'un controlToValidate à au moins un validator rattaché non valide. Dans ce cas, on change la couleur de la bordure.
        /// Si le parcours de tous les validators ne donne pas le contrôle passer en argument comme non valide, on enlève la bordure rouge.
        /// </summary>
        /// <param name="val">Validator ayant déclencher la fonction</param>
        function NewValidatorUpdateDisplay(val) {
            OriginalValidatorUpdateDisplay(val);                            // Déclenche la fonction d'origine

            for (var i = 0; i < Page_Validators.length; i++)                // Parcours des validators
            {
                // Vérificaton s'il s'agit bien du contrôle à valider et dans ce cas s'il est invalide
                if (val.controltovalidate == Page_Validators[i].controltovalidate && Page_Validators[i].isvalid == false) 
                {   
                    // Contrôle invalide, on change son style et on sort de la fonction. Pas nécessaire d'aller plus loin, il suffit d'un validator non valide
                    document.getElementById(val.controltovalidate).style.borderColor = 'red';       // Ici, on a choisi de changer la couleur du contour, mais on peut changer ce qu'on veut, ex : le fond ou tout autres style
                    return;
                }
            }

            // Si on arrive à cette instruction, c'est que le contrôle à valider est valide, on enlève ici le style "Erreur"
            document.getElementById(val.controltovalidate).style.borderColor = '';
           
        }
 

        
    //-->
</script>