none
Validação Javascript RRS feed

  • Pergunta

  • Bom dia Pessoal!

    Estou tentando validar um campo e gostaria que aparecesse um alert quando  clicar no button e o campo nome não estiver preenchido, mas não esta dando certo.

    Eis o código:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function validate() 
            {   //nome
                if (document.getElementById("TextBox1.ClientID").value == "")
                {
                    alert("Informe o nome.");
                    document.getElementById("TextBox1.ClientID").focus();
                    return false;
                }       
    
    
         </script>   
    </head>
    
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="Nome"></asp:Label>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </br>
            <asp:Label ID="Label2" runat="server" Text="E-mail"></asp:Label>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <br/>
            <asp:Button ID="Button1" Text="Enviar" OnClientClick="return validate()"  runat="server"/>
        </div>
        </form>
    </body>
    </html>

    O que está errado?

    quinta-feira, 14 de novembro de 2013 11:03

Respostas

  • Uma coisa jaque, já que você está fazendo uma página ASP.net, o componente "TEXTBOX1" não se chamará assim no lado cliente.

    Então, substitua:

    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function validate() 
            {   //nome
                if (document.getElementById('<%=TextBox1.ClientID%>').value == "")
                {
                    alert("Informe o nome.");
                    document.getElementById('<%=TextBox1.ClientID%>').focus();
                    return false;
                }       
         </script>   
    </head>

    Note a colocação do [ '<%=TextBox1.ClientId%>' ] (aspas simples, percentual e igual. Isso indica para o ASP.net que, quando ele renderizar a página, ele tem que ler a propriedade do componente.


    • Editado SammuelMiranda segunda-feira, 24 de novembro de 2014 13:50
    • Sugerido como Resposta SammuelMiranda segunda-feira, 24 de novembro de 2014 13:51
    • Marcado como Resposta Marcos SJ quarta-feira, 23 de setembro de 2015 20:44
    segunda-feira, 24 de novembro de 2014 13:49

Todas as Respostas

  • Tenta assim Jaque utilizando jquery, fica mais limpo seu código. 

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            $(document).ready(function(){
          
                 $('#btnButtonID').click(function(){
                    if($('#txtBoxID').val() == "")
                    {
                        alert("Informe o nome.");
                        $('#txtBoxId').focus();
                        return false;
                    }
                });
    
            });   
         
        </script>   
    </head>
    
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="Nome"></asp:Label>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </br>
            <asp:Label ID="Label2" runat="server" Text="E-mail"></asp:Label>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <br/>
            <asp:Button ID="Button1" Text="Enviar"   runat="server"/>
        </div>
        </form>
    </body>
    </html>

    Espero que ajude. 

    Se ajudou marque. 

    Abraço.


    Voce pode encarar um erro como uma besteira a ser esquecida, ou como um resultado que aponta uma nova direcao by Steve Jobs

    quinta-feira, 14 de novembro de 2013 11:12
  • Olá,

    Tenta tirar o "return" deixando só "validate()".

    Abraço

    quinta-feira, 14 de novembro de 2013 11:13
  • Obrigada Por responder, mas não der alert!
    quinta-feira, 14 de novembro de 2013 11:15
  • Obrigada Por responder, mas não der alert!
    quinta-feira, 14 de novembro de 2013 11:15
  • Isso mesmo que foi dito acima se for usar essa sua função esta faltando fechar uma chave }

    olhe :

    <script language="javascript" type="text/javascript">
            function validate() {
    
                var txt = document.getElementById('TextBox1').value;
                if (txt == "") {
                    alert("Informe o nome.");
                    document.getElementById("TextBox1").focus();
                    return false;
                }
    
            }
         </script>   
    Retire o return do button.

    • Marcado como Resposta Jaque JK quinta-feira, 14 de novembro de 2013 11:42
    • Não Marcado como Resposta Jaque JK quinta-feira, 14 de novembro de 2013 11:42
    quinta-feira, 14 de novembro de 2013 11:15
  • Obrigada! Funcionou, mas deixe eu te perguntar.

    Na verdade eu estava testando o alert o meu código abaixo está com Validation e alert no javascript e não aparece o alert que eu quero.

    Já tentei individualmente cada um e nada.

    Sabe o que pode ser?Estou no vs 2012 e já tentei no 2010 e também não funciona.

    Não sei se eu deveria importar algo.

    <%@ Page Title="" Language="C#" MasterPageFile="~/FrontPage.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IASD.ASCS.WebForm.register.group.Default" %>
    
    
    <%@ MasterType VirtualPath="~/FrontPage.Master" %>
    
    
    
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    
    
    
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
            <script type="text/javascript">
                function TreeNodeCheckChanged(event, control) {
                    // Valid for IE and Firefox/Safari/Chrome.
                    var obj = window.event ? window.event.srcElement : event.target;
                    var source = window.event ? window.event.srcElement.id : event.target.id;
                    source = source.replace(control.id + "t", control.id + "n");
                    var checkbox = document.getElementById(source);
                    if (checkbox != null && obj.tagName == "INPUT" && obj.type == "checkbox") {
                        __doPostBack(checkbox.id, "");
                    }
                }
       </script>
    
        <script type="text/javascript">
            function validate() {
    
                var txt = document.getElementById('txtGroupName.ClientID').value;
                if (txt == "") {
                    alert("Preencha o Campo Obrigatório!");
                    document.getElementById("txtGroupName.ClientID").focus();
                    return false;
                }
    
            }
         </script> 
          
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        
        <div class="esp_campo">
            <cc1:TabContainer ID="TabGroup" runat="server" TabIndex="0" Width="100%" CssClass="ajax__myTab">
                <cc1:TabPanel runat="server" HeaderText="Grupo" ID="tbgroups">
                    <HeaderTemplate>
                        Grupo
                    </HeaderTemplate>
                    <ContentTemplate>
                        <div id="Form">
                            <div class="table_search_">
                                <table style="width: 100%;">
                                    <tr>
                                        <td>
                                            <asp:Label ID="lbName" runat="server" Text="Nome"></asp:Label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:TextBox ID="txtGroupName" CssClass="textbox_search" runat="server"></asp:TextBox>
    
                                            
    
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtGroupName" ErrorMessage="Campo Obrigatório"  ValidationGroup="vsGroup"></asp:RequiredFieldValidator>
    
                                            
    
                                            <asp:HiddenField ID="hfGrupoID"
                                                runat="server" />
    
    
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
    
    
                        <div class="new_group">
                            <asp:ImageButton ID="btnNew" runat="server" ImageUrl="~/images/new.png" OnClick="btnNew_Click" ToolTip="Novo Grupo" />
    
    
                            <asp:ImageButton ID="btnSave" runat="server" ImageUrl="~/images/save.png" OnClick="btnSave_Click" OnClientClick="Validate()" ToolTip="Salvar Grupo" ValidationGroup="vsGroup" />
    
    
                            <asp:ImageButton ID="btnDelete" runat="server" ImageUrl="~/images/delete.png" OnClick="btnDelete_Click" />
                        </div>
    
                      
    
                       
                        <div class="GridUser">
                            <asp:GridView ID="gvGroup" Width="30%" runat="server" CssClass="GridViewUser" GridLines="None"
                                CellPadding="4" AutoGenerateColumns="False" OnRowDeleting="gvGroup_RowDeleting"
                                OnRowUpdating="gvGroup_RowUpdating">
                                <AlternatingRowStyle CssClass="GridAlternativeUser" />
                                <Columns>
                                    <asp:BoundField HeaderText="ID" DataField="GroupID" />
                                    <asp:BoundField HeaderText="Nome" DataField="Name" />
                                    <asp:ButtonField ButtonType="Image" CommandName="Update" ImageUrl="~/images/edit.png" />
                                    <asp:ButtonField ButtonType="Image" CommandName="Delete" ImageUrl="~/images/delete16.png" />
                                </Columns>
    
                                <HeaderStyle CssClass="GridHeaderGroup" />
    
                                <PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />
    
                                <PagerStyle CssClass="GridPagerGroup" />
    
                                <RowStyle CssClass="GridRowGroup" />
                            </asp:GridView>
    
                              
                        </div>
                        <asp:ValidationSummary ID="vsGroup" runat="server" ValidationGroup="vsGroup" ShowSummary="False" ShowMessageBox="True" />
    
    
                    </ContentTemplate>
               
    
                </cc1:TabPanel>
                <cc1:TabPanel runat="server" HeaderText="Menus" ID="tbMenus">
                     <HeaderTemplate>
                        Menus Por Grupo</HeaderTemplate>
                    <ContentTemplate>
                        <div class="page_name">
                            <asp:Label ID="lblTabName" runat="server" Text="Menus do Grupo"></asp:Label></div>
                        <div class="buttons">
                        </div>
                        <div class="forms">
                            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                                <ContentTemplate>
                                    <asp:TreeView ID="treeMenu" runat="server" CssClass="AspNet-TreeView" ShowLines="True"
                                        ShowCheckBoxes="All" OnTreeNodeCheckChanged="treeMenu_TreeNodeCheckChanged" ShowExpandCollapse="True"
                                        Enabled="true">
                                        <RootNodeStyle CssClass="AspNet-TreeView-Root" />
                                    </asp:TreeView>
                                </ContentTemplate>
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="treeMenu" EventName="TreeNodeCheckChanged"/>
                                </Triggers>
                            </asp:UpdatePanel>
                        </div>
                    </ContentTemplate>
                </cc1:TabPanel>
    
            </cc1:TabContainer>
            
        </div>
    </asp:Content>
    

    quinta-feira, 14 de novembro de 2013 11:41
  • Não entendi você então não quer validar via javascrip, quer validar usando Validator é isso ?
    quinta-feira, 14 de novembro de 2013 11:53
  • O que funcionar eu uso..rsrs

    Nenhum está funcionando!

    quinta-feira, 14 de novembro de 2013 11:57
  • Mas o seu Javascript validate() funciona eu testei e mostra o alert se o textbox txtGroup estiver vazio, retire o Validate e use o Javascrip.
    quinta-feira, 14 de novembro de 2013 12:06
  • Pois é eu também testei, mas no código ai de cima ele funciona e eu não sei pq.

    Eu já pedi ajuda aqui no fórun, mas o pessoal também não o que é. :(

    quinta-feira, 14 de novembro de 2013 12:22
  • Ops.. ele não funciona foi oque eu quis dizer
    quinta-feira, 14 de novembro de 2013 12:23
  • Olhe seu JavaScript está errado retire o ClientId igual esta feito aqui :

    <script type="text/javascript">
            function validate() {
    
                var txt = document.getElementById('txtGroupName').value;
                if (txt == "") {
                    alert("Preencha o Campo Obrigatório!");
                    document.getElementById("txtGroupName").focus();
                    return false;
                }
    
            }
         </script> 

    E a função chamada no seu botão está errada também e retire o Validator ficando seu botao salvar assim :

    <asp:ImageButton ID="btnSave" runat="server" OnClientClick="validate()" ToolTip="Salvar Grupo"/>

    quinta-feira, 14 de novembro de 2013 12:35
  • Parceiro, 

    Não foi também

    quinta-feira, 14 de novembro de 2013 12:38
  • Olha eu fiz pra você dos dois jeitos está funcionando adapte ao seu codigo pq retirei alguns eventos que não tenho aqui e a tab que n tenho tbm !

    Se vc copiar e colar em um webform novo vai funcionar assim que criar os eventos do botao certo veja a ideia.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="WebApplication1.WebForm5" %>
    
    <!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 type="text/javascript">
            function TreeNodeCheckChanged(event, control) {
                // Valid for IE and Firefox/Safari/Chrome.
                var obj = window.event ? window.event.srcElement : event.target;
                var source = window.event ? window.event.srcElement.id : event.target.id;
                source = source.replace(control.id + "t", control.id + "n");
                var checkbox = document.getElementById(source);
                if (checkbox != null && obj.tagName == "INPUT" && obj.type == "checkbox") {
                    __doPostBack(checkbox.id, "");
                }
            }
       </script>
    
        <script type="text/javascript">
            function validate() {
    
                var txt = document.getElementById('txtGroupName').value;
                if (txt == "") {
                    alert("Preencha o Campo Obrigatório!");
                    document.getElementById("txtGroupName").focus();
                    return false;
                }
    
            }
         </script> 
    
    
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
        
        <div class="esp_campo">
           
                    <HeaderTemplate>
                        Grupo
                    </HeaderTemplate>
                    <ContentTemplate>
                        <div id="Form">
                            <div class="table_search_">
                                <table style="width: 100%;">
                                    <tr>
                                        <td>
                                            <asp:Label ID="lbName" runat="server" Text="Nome"></asp:Label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <asp:TextBox ID="txtGroupName" CssClass="textbox_search" runat="server"></asp:TextBox>
    
                                            
    
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtGroupName" ErrorMessage="Campo Obrigatório"  ValidationGroup="vsGroup"></asp:RequiredFieldValidator>
    
                                            
    
                                            <asp:HiddenField ID="hfGrupoID"
                                                runat="server" />
    
    
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
    
    
                        <div class="new_group">
                            <asp:ImageButton ID="btnNew" runat="server" ImageUrl="~/images/new.png" OnClick="btnNew_Click" ToolTip="Novo Grupo" />
    
    
                            <asp:ImageButton ID="btnSave" runat="server" ImageUrl="~/images/save.png" OnClick="btnSave_Click" OnClientClick="validate()" ToolTip="Salvar Grupo" ValidationGroup="vsGroup" />
    
    
                            <asp:ImageButton ID="btnDelete" runat="server" ImageUrl="~/images/delete.png" OnClick="btnDelete_Click" />
                        </div>
    
                      
    
                       
                        <div class="GridUser">
                            <asp:GridView ID="gvGroup" Width="30%" runat="server" CssClass="GridViewUser" GridLines="None"
                                CellPadding="4" AutoGenerateColumns="False">
                                <AlternatingRowStyle CssClass="GridAlternativeUser" />
                                <Columns>
                                    <asp:BoundField HeaderText="ID" DataField="GroupID" />
                                    <asp:BoundField HeaderText="Nome" DataField="Name" />
                                    <asp:ButtonField ButtonType="Image" CommandName="Update" ImageUrl="~/images/edit.png" />
                                    <asp:ButtonField ButtonType="Image" CommandName="Delete" ImageUrl="~/images/delete16.png" />
                                </Columns>
    
                                <HeaderStyle CssClass="GridHeaderGroup" />
    
                                <PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />
    
                                <PagerStyle CssClass="GridPagerGroup" />
    
                                <RowStyle CssClass="GridRowGroup" />
                            </asp:GridView>
    
                              
                        </div>
                        <asp:ValidationSummary ID="vsGroup" runat="server" ValidationGroup="vsGroup" ShowSummary="False" ShowMessageBox="True" />
    
    
                    </ContentTemplate>
               
    
               
                     <HeaderTemplate>
                        Menus Por Grupo</HeaderTemplate>
                    <ContentTemplate>
                        <div class="page_name">
                            <asp:Label ID="lblTabName" runat="server" Text="Menus do Grupo"></asp:Label></div>
                        <div class="buttons">
                        </div>
                        <div class="forms">
                            
                                <ContentTemplate>
                                    <asp:TreeView ID="treeMenu" runat="server" CssClass="AspNet-TreeView" ShowLines="True"
                                        ShowCheckBoxes="All" ShowExpandCollapse="True"
                                        Enabled="true">
                                        <RootNodeStyle CssClass="AspNet-TreeView-Root" />
                                    </asp:TreeView>
                                </ContentTemplate>
                              
                        
                        </div>
                    </ContentTemplate>
               
            
        </div>
        </div>
        </form>
    </body>
    </html>
    

    quinta-feira, 14 de novembro de 2013 12:57
  • Parceiro, ta igual?
    quinta-feira, 14 de novembro de 2013 13:03
  • Olha o codigo alterei o JavaScrip a forma como você chama o metodo validate.
    quinta-feira, 14 de novembro de 2013 13:06
  • Para exibir uma mensagem referente ao campo validado, utilize a função alert("regra de validação ");

    Atenciosamente, Marcio Nogueira Cardoso Pinto.

    quinta-feira, 14 de novembro de 2013 13:11
  • Parceiro, tu pode me falar qual a linha? Pra mim ta igual ao do meu pc aqui
    quinta-feira, 14 de novembro de 2013 13:11
  • Amigo, Já tem:

    <script type="text/javascript">
            function validate() {

                var txt = document.getElementById('txtGroupName').value;
                if (txt == "") {
                    alert("Preencha o Campo Obrigatório!");
                    document.getElementById("txtGroupName").focus();
                    return false;
                }

            }
         </script> 


    quinta-feira, 14 de novembro de 2013 13:14
  • Parceiro, 

    Eu fui dar uma olhada no .cs do default.aspx (Nome do arquivo que estávamos vendo) e tem umas partes em vermelho. Quando passo o mouse por cima aparece o seguinte erro:

    this member is defined  more than once

    Sabe o que pode ser?No arquivo não tem nada repetido.

    quinta-feira, 14 de novembro de 2013 14:03
  • Jaque sugiro então vamos decidir, vamos usar somente JavaScript para validar blz. Retire todos os componentes asp de validação que o erro vai sumir, retire do txtGrupo tbm a validação asp, que te darei uma força mas faça isso primeiro !
    quinta-feira, 14 de novembro de 2013 15:24
  • Blz!

    Já tirei!

    quinta-feira, 14 de novembro de 2013 15:37
  • E o pior agora do nada apareceu um erroq ue não quer nem executar mais meu.

    Error 8 The type 'IASD.ASCS.WebForm.register.group.Default' already contains a definition for 'lbName' D:\TFS\IASD.ASCS\IASD.ASCS.WebForm\register\group\Default.aspx.designer.cs 40 59 IASD.ASCS.WebForm

    Tá falando isso de um monte de campo.

    quinta-feira, 14 de novembro de 2013 15:57
  • Você associou sua função em Javascript no evento OnSubmit de seu form?

    Outra alternativa é utilizar os validadores do ASP.Net.


    Atenciosamente, Marcio Nogueira Cardoso Pinto.

    quarta-feira, 8 de outubro de 2014 11:50
  • Não seria mais pratico e rápido utilizar o RequiredFieldValidator do próprio C#?
    quarta-feira, 8 de outubro de 2014 13:20
  • <script type="text/javascript">
           
    function validate()
           
    {   //nome
               
    if (document.getElementById("TextBox1.ClientID").value == "")
               
    {
                    alert
    ("Informe o nome.");
                    document
    .getElementById("TextBox1.ClientID").focus();
                   
    return false;
               
    }      
                    return true;

    }


    Atenciosamente, Marcio Nogueira Cardoso Pinto.

    sexta-feira, 21 de novembro de 2014 18:18
  • Uma coisa jaque, já que você está fazendo uma página ASP.net, o componente "TEXTBOX1" não se chamará assim no lado cliente.

    Então, substitua:

    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function validate() 
            {   //nome
                if (document.getElementById('<%=TextBox1.ClientID%>').value == "")
                {
                    alert("Informe o nome.");
                    document.getElementById('<%=TextBox1.ClientID%>').focus();
                    return false;
                }       
         </script>   
    </head>

    Note a colocação do [ '<%=TextBox1.ClientId%>' ] (aspas simples, percentual e igual. Isso indica para o ASP.net que, quando ele renderizar a página, ele tem que ler a propriedade do componente.


    • Editado SammuelMiranda segunda-feira, 24 de novembro de 2014 13:50
    • Sugerido como Resposta SammuelMiranda segunda-feira, 24 de novembro de 2014 13:51
    • Marcado como Resposta Marcos SJ quarta-feira, 23 de setembro de 2015 20:44
    segunda-feira, 24 de novembro de 2014 13:49
  • Caso tenha conseguido a solução finalize sua Thread marcando a resposta

    GTSA vantagem de ser inteligente é que podemos fingir que somos imbecis enquanto ao contrario é completamente impossivel

    domingo, 28 de junho de 2015 14:46