Olá pessoal,

Hoje vou ensinar como usar os controles RequiredFieldValidator, RegularExpressionValidator, CompareValidator, RangeValidator e CustomValidator com imagem. Não entendeu? Então imagine o seguinte controle em uma página ASP.Net.

E tivesse um RequiredFieldValidator ao controle, para caso o controle não fosse preenchido a tela ficasse da seguinte forma:

 
A definição do campo senha é o seguinte:

<asp:TextBox ID="TextBoxSenha" runat="server"
    TextMode="Password" MaxLength="20">
</asp:TextBox>

O RequiredFieldValidator deverá ser definido ANTES do controle senha. A declaração final deverá ficar assim:

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
    ControlToValidate="TextBoxSenha" Display="Dynamic">
    <asp:Image ID="Image1" runat="server" ImageUrl="Invalido.gif" />
</asp:RequiredFieldValidator>
<asp:TextBox ID="TextBoxSenha" runat="server" 
    TextMode="Password" MaxLength="20">
</asp:TextBox>

Pronto! Conseguimos usar uma imagem para ilustrar que um campo não está válido.
Mas com sempre, eu não gosto de problemas fáceis. Por que problemas fáceis nunca aparecem no dia-a-dia. Vamos complicar então.

Como vamos fazer para mostrar apenas UMA imagem para a seguinte situação:

Pensando rápido, a solução seria colocar dois RequiredFieldValidator, onde um validaria o ddd e outro o telefone. Então vamos colocar e ver o que acontece. O código ficaria assim:

<asp:RequiredFieldValidator ID="RequiredFieldValidatorDDDFixo"
     runat="server" ControlToValidate="TextBoxDDDFixo"
     Display="Dynamic">
    <asp:Image ID="Image14" runat="server" SkinID="ImageInvalid" />
</asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorTelFixo"
    runat="server" ControlToValidate="TextBoxTelFixo"
    Display="Dynamic">
    <asp:Image ID="Image13" runat="server" SkinID="ImageInvalid" />
</asp:RequiredFieldValidator>
<asp:TextBox ID="TextBoxDDDFixo" runat="server"
     MaxLength="4"></asp:TextBox>
<asp:TextBox ID="TextBoxTelFixo" runat="server" 
     MaxLength="20"></asp:TextBox>

Ao executarmos a aplicação, teremos o seguinte resultado:

As imagens ficaram uma ao lado da outra. E o que nós queremos é apenas UMA imagem.

Vamos à solução. O que devemos fazer então, é colocar os controles do tipo RequiredFieldValidator dentro de uma div. Da seguinte forma:

<div style="width:18px; height:20px;">
    <asp:RequiredFieldValidator ID="RequiredFieldValidatorDDDFixo"
     runat="server" ControlToValidate="TextBoxDDDFixo" 
     Display="Dynamic">
        <asp:Image ID="Image14" runat="server" SkinID="ImageInvalid" />
    </asp:RequiredFieldValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidatorTelFixo"
     runat="server" ControlToValidate="TextBoxTelFixo"
     Display="Dynamic">
        <asp:Image ID="Image13" runat="server" SkinID="ImageInvalid" />
    </asp:RequiredFieldValidator>
</div>
<asp:TextBox ID="TextBoxDDDFixo" runat="server"
     MaxLength="4"></asp:TextBox>
<asp:TextBox ID="TextBoxTelFixo" runat="server"
     MaxLength="20"></asp:TextBox>

A div tem a finalidade fixar um tamanho. Esse tamanho é fixado no tamanho de apenas uma imagem.

O resultado será o seguinte:

- Não preenchendo nada

- Preenchendo apenas o DDD

- Preenchendo DDD e telefone

 É isso aí pessoal,
Espero que tenham gostado.

[]’s e até a próxima.