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

Question

Pouvez-vous effectuer une validation javascript côté client personnalisée 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 évidence la couleur du champ ou de l'arrière-plan par exemple.

Answer 1

La norme CustomValidator a un ClientValidationFunction propriété pour que:

<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

Qu'est-ce que vous pouvez faire est crochet dans le validateur et assigner une nouvelle méthode Evaluate, comme ceci:

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

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

RFV est l'ID de mon champ validateur requis. Vous devez le faire au bas de votre page afin qu'il l'assigne après que le javascript du validateur soit enregistré.

Il est beaucoup plus facile d'utiliser simplement le CustomFieldValidator et d'assigner 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> 

Vérifiez la documentation here et here.

Answer 3

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

Ce qui suit sera appliqué à tous les validateurs et est purement côté client. Je l'utilise pour changer la façon dont la validation ASP.Net est affichée, pas la façon dont la validation est réellement effectuée. Il doit être enveloppé dans un $ (document) .ready() pour s'assurer 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'); 
    } 
}