Pouvez-vous avoir une validation javascript personnalisée côté client pour les validateurs de formulaire Web ASP.NET standard?

Question

Pouvez-vous avoir une validation javascript personnalisée côté client pour les validateurs de formulaire Web ASP.NET standard?

Par exemple, utilisez un asp: RequiredFieldValidator laissez le code côté serveur seul mais implémentez votre propre notification client en utilisant jQuery pour mettre en surbrillance le champ ou la couleur d'arrière-plan, par exemple.

Answer 1

Le standard CustomValidator comporte un ClientValidationFunction pour cette propriété:

<asp:CustomValidator ControlToValidate="Text1" 
                     ClientValidationFunction="onValidate" />

<script type='text/javascript'>
function onValidate(validatorSpan, eventArgs)
 { eventArgs.IsValid = (eventArgs.Value.length > 0);
   if (!eventArgs.IsValid) highlight(validatorSpan);
 }
</script>

Answer 2

Oui je l’ai fait. J'ai utilisé Firebug pour découvrir les fonctions Dot.Net JS, puis détourné les fonctions de validation

Ce qui suit sera appliqué à tous les validateurs et concerne uniquement le client. Je l'utilise pour changer la manière dont la validation ASP.Net est affichée, et non la façon dont la validation est réellement effectuée. Il doit être encapsulé dans un $ (document) .ready () pour qu’il écrase la validation ASP.net d’origine.

/**
 * Re-assigns a couple of the ASP.NET validation JS functions to
 * provide a more flexible approach
 */
function UpgradeASPNETValidation(){
    // Hi-jack the ASP.NET error display only if required
    if (typeof(Page_ClientValidate) != "undefined") {
        ValidatorUpdateDisplay = NicerValidatorUpdateDisplay;
        AspPage_ClientValidate = Page_ClientValidate;
        Page_ClientValidate = NicerPage_ClientValidate;
   }
}

/**
 * Extends the classic ASP.NET validation to add a class to the parent span when invalid
 */
function NicerValidatorUpdateDisplay(val){
    if (val.isvalid){
        // do custom removing
        $(val).fadeOut('slow');
    } else {
        // do custom show
        $(val).fadeIn('slow');
    }
}

/**
 * Extends classic ASP.NET validation to include parent element styling
 */
function NicerPage_ClientValidate(validationGroup){
    var valid = AspPage_ClientValidate(validationGroup);

    if (!valid){
        // do custom styling etc
        // I added a background colour to the parent object
        $(this).parent().addClass('invalidField');
    }
}

Answer 3

Ce que vous pouvez faire est d’accrocher le validateur et d’affecter une nouvelle méthode d’évaluation, comme celle-ci:

  <script type="text/javascript">
        rfv.evaluationfunction = validator;

        function validator(sender, e) {
            alert('rawr');
        }
    </script>

rfv est l'ID de mon validateur de champ requis. Vous devez le faire en bas de votre page pour qu’elle l’assigne après l’enregistrement du code JavaScript du validateur.

Il est beaucoup plus simple d'utiliser le CustomFieldValidator et d'affecter sa propriété de validation côté client.

<asp:CustomValidator ControlToValidate="txtBox" ClientValidationFunction="onValidate" />

<script type='text/javascript'>
function onValidate(sender, e)
 { 
     alert('do validation');
 }
</script>

Consultez la documentation ici. et ici .