Usuário com melhor resposta
Validação Javascript

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?
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
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
-
-
-
-
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.
-
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>
-
-
-
-
-
-
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"/>
-
-
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>
-
-
-
-
-
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>
-
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.
-
-
-
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.
-
-
-
<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.
-
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
-