domingo, 12 de dezembro de 2010

Usando o CustomValidator

E aí, pessoal!

Dentre os controles de validação do Visual Studio, tem um deles que julgo ser muito útil, já que podemos customizar um validador utilizando uma rotina em linguagem JavaScript (ou linguagem C# e VB.Net com validação do lado do servidor). Estamos falando do CustomValidator.

Neste artigo, vamos utilizar um exemplo simples pra validar uma digitação numérica em um controle do tipoTextBox.

Crie um novo projeto no VS do tipo Web Site e linguagem C#.



Na aba Source da página Default.aspx, altere o código fonte conforme as linhas abaixo: 
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs"Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript">
        function validateNumber(oSrc, args) {
            var num = parseFloat(args.Value);
            if (isNaN(num))
                args.IsValid = false;
            else
                args.IsValid = (args.Value.length == 10);
        }
    </script>
</head>
<body style="font-familyTrebuchet MS;">
    <form id="form1" runat="server">
    <h1>Usando o CustomValidator</h1>
    <div>Digite um número</div>
        <asp:TextBox ID="TextBox1" runat="server" MaxLength="10"></asp:TextBox>
    <asp:CustomValidator ID="CustomValidator1"
            runat="server" ErrorMessage="Informe um número com 10 dígitos"
        ClientValidationFunction="validateNumber" ControlToValidate="TextBox1"
        SetFocusOnError="True" ValidateEmptyText="True"></asp:CustomValidator><br /><br />
    <asp:Button ID="Button1" runat="server" Text="Enviar" onclick="Button1_Click" />
    </form>
</body>
</html>

Perceba que criamos uma função em linguagem JavaScript com o nome de validateNumber. O objetivo dela é validar se a digitação é numérica além da quantidade de dígitos que foi digitado pelo usuário.

Clique no menu View > Code ou pressione a tecla F7 para acessarmos o editor de código em linguagem C#. Inicialmente, altere o evento Load da página conforme os linhas abaixo:
protected void Page_Load(object sender, EventArgs e)
{
        string script = "if (document.form1.TextBox1.value == '') {       document.form1.TextBox1.focus(); return false; }";
        Button1.Attributes.Add("onclick", script);
}

Dê um clique no botão Enviar, e acrescente as linhas de código a seguir:

protected void Button1_Click(object sender, EventArgs e)
{
        ScriptManager.RegisterStartupScript(thisthis.GetType(), "alerta","alert('Enviado com sucesso!');"true);
}
Se tudo correr bem, teste a aplicação e confira o resultado.


Por enquanto é só. Até mais!

Nenhum comentário:

Postar um comentário

Deixe aqui seu comentário