Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

TeixeiraRamos

[Resolvido] Select

Recommended Posts

Boa tarde a todos.

Tenho um formulário chamado contato.html.

A função abaixo está funcionando corretamente, ou seja, se não indica o nome, email ou mensagem abre a tela criticando a falta do preenchido do campo.

 

O javascript:

 


<script>
<!--
function valida_campos(form){
        if(document.getElementById("campo"+1).value == ""){
alert("O campo Nome é obrigatório.");
return false;
}if(document.getElementById("campo"+2).value == ""){
alert("O campo E-mail é obrigatório.");
return false;
}if(document.getElementById("campo"+3).value == ""){
alert("O campo Mensagem é obrigatório.");
return false;
}
if( checkMail(document.getElementById("campo"+2).value)){
return true;
}else{
alert("E-mail de Destino inválido.");
return false;
}
    }
function checkMail(mail){
    var er = new RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/);
    if(typeof(mail) == "string"){
        if(er.test(mail)){
            return true; }
    }else if(typeof(mail) == "object"){
        if(er.test(mail.value)){
            return true;
        }
    }else{
        return false;
    }
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

//-->
</script>

 

 

Ocorre que nesse formulário tem também uma caixa de seleção e gostaria que a mesma fosse validada também, ou seja:

  • Ao abrir o formulário a primeira opção: "Escolha uma opção para assunto";
  • Se o usuário clicar em "Enviar" e esqueceu e não indicou uma opção do assunto mantendo a opção "Escolha uma opção para assunto" tembém abrir uma tela informando "Escolha uma opção para assunto".
  • Se ao clicar em "Enviar" constar uma das opções, ou seja, Política, Hobby,Informática, Religião, Pesquisa, Samba o formulário não é enviado.

O contato.html está assim:

 

 

<!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>
      		
<script>
<!--
function valida_campos(form){
        if(document.getElementById("campo"+1).value == ""){
alert("O campo Nome é obrigatório.");
return false;
}if(document.getElementById("campo"+2).value == ""){
alert("O campo E-mail é obrigatório.");
return false;
}if(document.getElementById("campo"+3).value == ""){
alert("O campo Mensagem é obrigatório.");
return false;
}
if( checkMail(document.getElementById("campo"+2).value)){
return true;
}else{
alert("E-mail de Destino inválido.");
return false;
}
    }
function checkMail(mail){
    var er = new RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/);
    if(typeof(mail) == "string"){
        if(er.test(mail)){
            return true; }
    }else if(typeof(mail) == "object"){
        if(er.test(mail.value)){
            return true;
        }
    }else{
        return false;
    }
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}


//-->
</script>
		
		<title>Blog Teixeira - Contato</title>
                
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
        <meta http-equiv="content-language" content="pt-br" />    		        
		<meta name="description" content="divulgar minhas pesquisas com objetivo de prestar informações, prestação de serviços" />
		<meta name="author" content="Teixeira" />      

    	<link href="geral.css" rel="stylesheet" type="text/css" />
		<link href="formulario.css" rel="stylesheet" type="text/css" />
	
	   
</head>
<body>
<div id="tudo"><!--Início da div tudo-->

<div id="topo"><!--Início da div topo-->
 	<h1>Blog <span>do Teixeira</span></h1>
 
<div id="sobre"><!--Início da div sobre-->
	<p>Teixeira teve um bom aproveitamento em diversos cursos da área de WebDesign e WebMaster. Atualmente aposentado tem esse 	espaço para     postar comentários, artigos, reportagens, pesquisas. Tudo que ache relevante para o debate e a livre expressão 	de opiniões.</p>
</div><!--Fim da div sobre-->


<ul id="nav"><!--Início da div nav-->
	<li><a href="index.html">Inicial</a></li>
	<li><a href="politica.html">Política</a></li>
	<li><a href="hobby.html">hobby</a></li>
	<li><a href="informatica.html">Informática</a></li>
	<li><a href="religiao.html">Religião</a></li>
	<li><a href="pesquisa.html">Pesquisa</a></li>
	<li><a href="samba.html">Samba</a></li>
	<li><a href="index.html">Eu indico</a></li>
	<li><a href="contatos.html">Contatos</a></li>
	<li><a href="blog.html">Blog</a></li>
</ul>	

</div><!-- Fim da div#topo -->

<div id="principal"><!--Início da div principal-->

		<form name="form1" onsubmit="return valida_campos(this);" action="/cgi-bin/remotemail.cgi" method="post">
		<input type="hidden" value="carlos.teixeira@terra.com.br" name="recipient" />
		<input type="hidden" value="http://informacaoteixeira.com.br/confirma_formulario.html" />
		<input type="hidden" value="Mensagem" name="subject" />
		
		<table id="table">
			<tbody>
				<tr>
					<td  id="td" colspan="2">
						<p class="p-top">Todas as mensagens serão lidas, analisadas e publicadas em seguida. Todos os campos são                        obrigatórios. Muito obrigado.</p>	
					</td>
				</tr>
				
				<tr>
					<td id="td-nome">
						<span>Nome:</span>
					</td>	
		            
					<td id="td-nome">
					  <input type="text" name="Nome" size="60" id="campo1" />
					</td>					
				</tr>
					
				<tr>
					<td id="td-email">
						<span>E-mail</span>					
					</td>
					
					<td id="td-email">
						<input type="text" name="Email" size="45" id="campo2" />
					</td> 	 
				 		 
			  </tr>
				
				<tr>
					<td id="td-opcao">
						<span>Marque opção/assunto:</span>
					</td>
					
					<td id="td-opcao">
					<select name="menu1">
					  <option>Escolha uma opção para assunto</option>
					  <option>Política</option>
					  <option>Hobby</option>
					  <option>Informática</option>
					  <option>Religião</option>
					  <option>Pesquisa</option>
					  <option>Samba</option>
					</select>			
				</tr>
				
				<tr>
					<td id="td-mensagem">
					   <span>Sua mensagem:</span>
				   </td>
					 
					 <td id="td-mensagem">
					 	<textarea name="Mensagem" cols="60" rows="10" id="campo3"></textarea>
					 </td>
					   
				<tr>
					<td id="td-mensagem">
					<span> </span>
					
				  <td>
					<input type="submit" value="Enviar"/>
				  </td>	
					
				</tr>					  
		</table>
	    <p> </p>
	    <p> </p>
	</form>	


</div><!-- Fim da div#principal -->

<div id="rodape"><!--Início da div#rodape -->
<p>Site criado em 2010 por Teixieira - Copyright ®  2010 - Rio de Janeiro/RJ</p>
</div><!--Fim da div#rodape-->

</div> <!-- Fim da div#tudo -->

</body>
</html>

 

 

 

Não estou conseguindo incluir essa validação no campo opção e botão "Enviar".

Obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

Thiago,

Não consegui e agora não valida campo nenhum mais. Já procurei aqui e não achei em exemplo.

No final do Javascript eu coloquei:

 


if (menu1.value == "0") {
            alert('Escolha uma opção para assunto.');
            menu1.focus();
            return false;
      }

Ficando:

 

<script>
<!--
function valida_campos(form){
        if(document.getElementById("campo"+1).value == ""){
alert("O campo Nome é obrigatório.");
return false;
}if(document.getElementById("campo"+2).value == ""){
alert("O campo E-mail é obrigatório.");
return false;
}if(document.getElementById("campo"+3).value == ""){
alert("O campo Mensagem é obrigatório.");
return false;
}
if( checkMail(document.getElementById("campo"+2).value)){
return true;
}else{
alert("E-mail de Destino inválido.");
return false;
}
    }
function checkMail(mail){
    var er = new RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/);
    if(typeof(mail) == "string"){
        if(er.test(mail)){
            return true; }
    }else if(typeof(mail) == "object"){
        if(er.test(mail.value)){
            return true;
        }
    }else{
        return false;
    }
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;

}

if (menu1.value == "0") {
            alert('Escolha uma opção para assunto.');
            menu1.focus();
            return false;
      }
//-->
</script>

[/quote]


O value para cada opção:
[quote]
<select name="menu1">
<option value="0">Escolha uma opção para assunto</option>
<option value="Política">Política</option>
<option value="Hobby">Hobby</option>
<option value="Informática">Informática</option>
<option value="Religião">Religião</option>
<option value="Pesquisa">Pesquisa</option>
<option value="Samba">Samba</option>
</select>			
[/quote]

O botão Enviara ficou:
[quote]
<td>
<input type="submit" name="menu1" value="Enviar"/>
</td>	

 

 

 

 

Desculpe se não estou postando corretamente.

Se for o caso edite, por favor.

Compartilhar este post


Link para o post
Compartilhar em outros sites

A lógica é essa. Tenta aê.

 

 

<select name="menu1" id="menu1">
  <option value="0">Escolha uma opção para assunto</option>
  <option value="1">Política</option>
  <option value="2">Hobby</option>
  <option value="3">Informática</option>
  <option value="4">Religião</option>
  <option value="5">Pesquisa</option>
  <option value="6">Samba</option>
</select>

window.onload = function(){
	var select = document.getElementById('menu1');
	select.onchange = function(){
		if(this.value == 0){
			alert('Escolha um campo!');
			return false;
		}
	};
};

 

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

O tiro estava comendo por aqui e só foi possível volta agora. Não corremos risco de pegar balas mas a tensão é muito grande.

Mas é o seguinte. Tentei conforme as orientações os campos voltaram a ser validados (nome, email, mensagem, mas o da "var select" opções não.

A formulário abre fica como primeira opção "Escolha uma opção para assunto", como eu desejava, mas não está sendo cricado. Mantendo a opção "Escolha uma opção para assunto" ele é enviado. Estou errando alguma coisa.

 

 

O Javascript com a sua função no final.

<script>

<!--

function valida_campos(form){

if(document.getElementById("campo"+1).value == ""){

alert("O campo Nome é obrigatório.");

return false;

}if(document.getElementById("campo"+2).value == ""){

alert("O campo E-mail é obrigatório.");

return false;

}if(document.getElementById("campo"+3).value == ""){

alert("O campo Mensagem é obrigatório.");

return false;

}

if( checkMail(document.getElementById("campo"+2).value)){

return true;

}else{

alert("E-mail de Destino inválido.");

return false;

}

}

function checkMail(mail){

var er = new RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/);

if(typeof(mail) == "string"){

if(er.test(mail)){

return true; }

}else if(typeof(mail) == "object"){

if(er.test(mail.value)){

return true;

}

}else{

return false;

}

}

 

function MM_jumpMenu(targ,selObj,restore){ //v3.0

eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

if (restore) selObj.selectedIndex=0;

 

}

 

window.onload = function(){

var select = document.getElementById('menu1');

select.onchange = function(){

if(this.value == 0){

alert("Escolha um campo!");

return false;

}

};

};

//-->

</script>

 

 

 

As option

<select name="menu1" id="menu1">

<option value="0">Escolha uma opção para assunto</option>

<option value="1">Política</option>

<option value="2">Hobby</option>

<option value="3">Informática</option>

<option value="4">Religião</option>

<option value="5">Pesquisa</option>

<option value="6">Samba</option>

</select>

 

 

O código do Botão:

<td>

<input type="submit" name="menu1" value="Enviar"/>

</td>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Thiago,

Compreendo que se estou esperando é porque tem outros para se dado atenção.

Se tiver uma oportunidade de um analisado porque não está funcionando o JavaScript.

Muito obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ahh certo... Então você vai ter que fazer de forma diferente. Estuda o código que eu te passei e aplique-o em uma função que ocorre quando o botão input[type=submit] for clicado.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tentei com esse código no botão "Enviar" e no que estava coloquei um <!-- -->.

Não funcionou.

 

O javaScript:

Sem um nome para a function não funcionou e resolvi colocar um nome (Valida) mas mesmo indicando não funcionou. Continua validando todos os campos exceto o opção. Sua função não tem (Valida):

window.onload = function(Valida){

var select = document.getElementById('menu1');

select.onchange = function(){

if(this.value == 0){

alert("Escolha um campo!");

return false;

}

};

};

 

function valida_campos(form){

if(document.getElementById("campo"+1).value == ""){

alert("O campo Nome é obrigatório.");

return false;

}if(document.getElementById("campo"+2).value == ""){

alert("O campo E-mail é obrigatório.");

return false;

}if(document.getElementById("campo"+3).value == ""){

alert("O campo Mensagem é obrigatório.");

return false;

}

if( checkMail(document.getElementById("campo"+2).value)){

return true;

}else{

alert("E-mail de Destino inválido.");

return false;

}

}

function checkMail(mail){

var er = new RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/);

if(typeof(mail) == "string"){

if(er.test(mail)){

return true; }

}else if(typeof(mail) == "object"){

if(er.test(mail.value)){

return true;

}

}else{

return false;

}

}

 

function MM_jumpMenu(targ,selObj,restore){ //v3.0

eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

if (restore) selObj.selectedIndex=0;

}

//-->

</script>

 

No botão enviar coloquei:

 

<td>

<input type="submit" name="Enviar" value="Enviar" onclick="Valida(this.form);Enviar();">

<!--<input type="submit" name="menu1" value="Enviar" id='menu1'/>-->

</td>

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Confusão de código... heheheh Tenta assim:

 

<input type="submit" name="Enviar" value="Enviar" onclick="Valida(this.form);Enviar();" id="submeter" />

window.onload = function(){
    var submit = document.getElementById('submeter');
    submit.onclick = function(){
        if(document.getElementById('menu1').value == 0){
            alert("Escolha um campo!");
            return false;
        }
    };
};

E tire aquele código que te passei.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

Os campos nome, email e opção se não forem digitados abre a mesma mensagem: "Escolha um campo!", ou seja:

 

a) abrindo o formulário é não digitando nada e clicando em "Enviar" abre a tela com a mensagem: "Escolha um campo!";

Antes informava: a validação do campo 1 "nome" e informava: "O campo Nome é obrigatório.";

 

B) digitando no "nome" mantendo os outros campos vazios aparcece a mesma mensagem: "Escolha um campo!";

Antes informava: "O campo E-mail é obrigatório." que o campo 2;

 

c) digitando o "nome" campo 1, compo 2 email e não escolhendo uma opção aparece a mensagem: "Escolha um campo!"

Correto.

 

d) agora se digitar tudo e escolher uma opção e apenas a "mensagem" não for digitada a aparece corretamente: "O campo Mensagem é obrigatório."

 

e) e para completar se abrir o formulário e for logo escolhendo uma opção ele valida informando as mensagens corretas uma a uma.

Se não alterei nada a não ser o JavaScript e a linha do Botão por que esse informção padrão "Escolha um campo!"

Será que é posição do JavaScript? Troquei, coloquei a sua função no final e continuou.

Código completo com o JavaScript:

<!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>
      		
<script>
<!--
window.onload = function(){
    var submit = document.getElementById('submeter');
    submit.onclick = function(){
        if(document.getElementById('menu1').value == 0){
            alert("Escolha um campo!");
            return false;
        }
    };
};

function valida_campos(form){
        if(document.getElementById("campo"+1).value == ""){
alert("O campo Nome é obrigatório.");
return false;
}if(document.getElementById("campo"+2).value == ""){
alert("O campo E-mail é obrigatório.");
return false;
}if(document.getElementById("campo"+3).value == ""){
alert("O campo Mensagem é obrigatório.");
return false;
}
if( checkMail(document.getElementById("campo"+2).value)){
return true;
}else{
alert("E-mail de Destino inválido.");
return false;
}
    }
function checkMail(mail){
    var er = new RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/);
    if(typeof(mail) == "string"){
        if(er.test(mail)){
            return true; }
    }else if(typeof(mail) == "object"){
        if(er.test(mail.value)){
            return true;
        }
    }else{
        return false;
    }
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;

}


//-->
</script>
		
		<title>Blog Teixeira - Contato</title>
                
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
        <meta http-equiv="content-language" content="pt-br" />    		        
		<meta name="description" content="divulgar minhas pesquisas com objetivo de prestar informações, prestação de serviços" />
		<meta name="author" content="Teixeira" />      

    	<link href="geral.css" rel="stylesheet" type="text/css" />
		<link href="formulario.css" rel="stylesheet" type="text/css" />
	
	   
</head>
<body>
<div id="tudo"><!--Início da div tudo-->

<div id="topo"><!--Início da div topo-->
 	<h1>Blog <span>do Teixeira</span></h1>
 
<div id="sobre"><!--Início da div sobre-->
	<p>Teixeira teve um bom aproveitamento em diversos cursos da área de WebDesign e WebMaster. Atualmente aposentado tem esse 	espaço para     postar comentários, artigos, reportagens, pesquisas. Tudo que ache relevante para o debate e a livre expressão 	de opiniões.</p>
</div><!--Fim da div sobre-->


<ul id="nav"><!--Início da div nav-->
	<li><a href="index.html">Inicial</a></li>
	<li><a href="politica.html">Política</a></li>
	<li><a href="hobby.html">hobby</a></li>
	<li><a href="informatica.html">Informática</a></li>
	<li><a href="religiao.html">Religião</a></li>
	<li><a href="pesquisa.html">Pesquisa</a></li>
	<li><a href="samba.html">Samba</a></li>
	<li><a href="index.html">Eu indico</a></li>
	<li><a href="contatos.html">Contatos</a></li>
	<li><a href="blog.html">Blog</a></li>
</ul>	

</div><!-- Fim da div#topo -->

<div id="principal"><!--Início da div principal-->

		<form name="form1" onsubmit="return valida_campos(this);" action="/cgi-bin/remotemail.cgi" method="post">
		<input type="hidden" value="carlos.teixeira@terra.com.br" name="recipient" />
		<input type="hidden" value="http://informacaoteixeira.com.br/confirma_formulario.html" />
		<input type="hidden" value="Mensagem" name="subject" />
		
		<table id="table">
			<tbody>
				<tr>
					<td  id="td" colspan="2">
						<p class="p-top">Todas as mensagens serão lidas, analisadas e publicadas em seguida. Todos os campos são                        obrigatórios. Muito obrigado.</p>	
					</td>
				</tr>
				
				<tr>
					<td id="td-nome">
						<span>Nome:</span>
					</td>	
		            
					<td id="td-nome">
					  <input type="text" name="Nome" size="60" id="campo1" />
					</td>					
				</tr>
					
				<tr>
					<td id="td-email">
						<span>E-mail</span>					
					</td>
					
					<td id="td-email">
						<input type="text" name="Email" size="45" id="campo2" />
					</td> 	 
				 		 
			  </tr>
				
				<tr>
					<td id="td-opcao">
						<span>Marque opção/assunto:</span>
					</td>
					
					<td id="td-opcao">
					<select name="menu1" id="menu1">
					  <option value="0">Escolha uma opção para assunto</option>
  					  <option value="1">Política</option>
  					  <option value="2">Hobby</option>
  					  <option value="3">Informática</option>
  					  <option value="4">Religião</option>
  					  <option value="5">Pesquisa</option>
  					  <option value="6">Samba</option>
					 </select>

				</tr>
				
				<tr>
					<td id="td-mensagem">
					   <span>Sua mensagem:</span>
				   </td>
					 
					 <td id="td-mensagem">
					 	<textarea name="Mensagem" cols="60" rows="10" id="campo3"></textarea>
					 </td>
					   
				<tr>
					<td id="td-mensagem">
					<span> </span>
					
				  <td>
		<input type="submit" name="Enviar" value="Enviar" onclick="Valida(this.form);Enviar();" id="submeter" />

		                 </td>	
					
				</tr>					  
		</table>
	    <p> </p>
	    <p> </p>
	</form>	

</div><!-- Fim da div#principal -->

<div id="rodape"><!--Início da div#rodape -->
<p>Site criado em 2010 por Teixieira - Copyright ®  2010 - Rio de Janeiro/RJ</p>
</div><!--Fim da div#rodape-->

</div> <!-- Fim da div#tudo -->

</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

quando o botão input[type=submit] for clicado.

 

Para validar formulários, a mecânica não pode ser essa.

o clique no botão submit, não é algo 'realmente importante'. É preciso aplicar a validação no onsubmit() do form.

 

 

Removi a parte HTML não interessante à dúvida.

<!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>

	<title>Blog Teixeira - Contato</title>

<script type="text/javascript">
window.onload = function(){
	id('form1').onsubmit = function(){
		var erro = 0;
		erro = !obr( 'Nome' ) ? erro+1 : erro;
		erro = !obr( 'Email' ) ? erro+1 : erro;
		erro = !obr( 'Assunto' ) ? erro+1 : erro;
		erro = !obr( 'Mensagem' ) ? erro+1 : erro;
		
		if( !checkMail( id('Email') ) )
		{
			alert( 'Digite um email válido!' );
			return false;
		}
		if( erro>0 )
			return false;
	};
};
function obr( campo ){
	if( id(campo).value=='' || id(campo).value==0 ){
		alert( 'O campo '+campo+' é obrigatório!' );
		return false;
	}
	else
		return true;
}
function id( el ){
	return document.getElementById( el );
}

function checkMail(mail){
    var er = new RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/);
    if(typeof(mail) == "string"){
        if(er.test(mail)){
            return true; }
    }else if(typeof(mail) == "object"){
        if(er.test(mail.value)){
            return true;
        }
    }else{
        return false;
    }
}
</script>          
</head>
<body>

	<form name="form1" id="form1" action="/cgi-bin/remotemail.cgi" method="post">
		<input type="hidden" value="carlos.teixeira@terra.com.br" name="recipient" />
		<input type="hidden" value="http://informacaoteixeira.com.br/confirma_formulario.html" />
		<input type="hidden" value="Mensagem" name="subject" />


		<p class="p-top">Todas as mensagens serão lidas, analisadas e publicadas em seguida. Todos os campos são
		obrigatórios. Muito obrigado.</p>       

		Nome: <input type="text" name="Nome" size="60" id="Nome" />
		E-mail: <input type="text" name="Email" size="45" id="Email" />

		Marque opção/assunto: <select name="Assunto" id="Assunto">
				<option value="0">Escolha uma opção para assunto</option>
				<option value="1">Política</option>
				<option value="2">Hobby</option>
				<option value="3">Informática</option>
				<option value="4">Religião</option>
				<option value="5">Pesquisa</option>
				<option value="6">Samba</option>
			</select>



		Sua mensagem: <textarea name="Mensagem" cols="60" rows="10" id="Mensagem"></textarea>

		<input type="submit" name="Enviar" value="Enviar" />

	</form> 

</body>
</html>
Tem outras formas de fazer, mas o jeito correto é:

validar no onsubmit do formulário. Retornando TRUE em caso de 'Tudo Ok'(todos os campos preenchidos e com valores corretos), ou FALSE em caso de algum erro.

Compartilhar este post


Link para o post
Compartilhar em outros sites

100% Correto.

Muito obrigado Thiago e William Bruno. Vou colocar no "ar" o site e informo o endereço para criticas.

Podem ter certeza que estou me empenhando.

Sei que é uma coisa meio chata de ficar perguntando mas gostaria de comprar mais livros bons sobre o assunto. Tenho um só de Alan Carvalho "Desenvolvendo na Web com JavaScript - Inicial e Profissional" que é bom, tem muitos exemplos mas sempre é bom ter outros. Se não for permitido responder esses tipos de coisas no forum desculpe. Meu e-mail é carlos.teixeira@terra.com.br

Fiz alguns cursos mas muita coisa se aprende mesmo se não desistirmos nunca e principalmente ter humildade para perguntar.

O handler de evento - onsubmit só sei essa definição: "o que deve ocorrer quando o formulário for submetido".

Está sempre procurando algo nos foruns, principalmente aqueles com excelente nível e que se aprende.

Valeu!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Por favor, esqueci de uma coisa. Pode reabrir essa postagem?

É o seguinte. Depois que o usuário clicar em "Enviar" não poderia ser incluído no JavaScript algo para enviar um e-mail para remetente informando:

 

"Você enviou uma mensagem para Bog do Teixeira. Será analisada e postada. Obrigado."

Compartilhar este post


Link para o post
Compartilhar em outros sites

impossível, javascript não envia emails.

 

terá que utilizar alguma linguagem server-side como php, asp..

Compartilhar este post


Link para o post
Compartilhar em outros sites

William,

Logo aquele contato.html que deu um trabalhão, coloquei no local da hospedagem e somente lá não aparece o campo Mensagem e aparece o código html.

 

O código no local da hospedagem está:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <script type="text/javascript">
window.onload = function(){
        id('form1').onsubmit = function(){
                var erro = 0;
                erro = !obr( 'Nome' ) ? erro+1 : erro;
                erro = !obr( 'Email' ) ? erro+1 : erro;
                erro = !obr( 'Assunto' ) ? erro+1 : erro;
                erro = !obr( 'Mensagem' ) ? erro+1 : erro;
         

                if( !checkMail( id('Email') ) )

                {
                        alert( 'Digite um email v�lido!' );
                        return false;
                }

                if( erro>0 )
                        return false;
        };

};

function obr( campo ){

        if( id(campo).value=='' || id(campo).value==0 ){
                alert( 'O campo '+campo+' � obrigat�rio!' );
                return false;
        }
        else
                return true;
}

function id( el ){

        return document.getElementById( el );
}

function checkMail(mail){
    var er = new RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/);
    if(typeof(mail) == "string"){
        if(er.test(mail)){
            return true; }
    }else if(typeof(mail) == "object"){
        if(er.test(mail.value)){
            return true;
        }
    }else{
        return false;
    }
}
</script>
        <title>Blog Teixeira - Inicil</title>
        <meta name="description" content="divulgar minhas pesquisas com objetivo de prestar informações, prestação de serviços" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="language" content="pt-br" />
        <meta name="title" content="Teixeira" />
        <link href="css/geral.css" rel="stylesheet" media="all" type="text/css" />
    </head>
    <body>
        <div id="tudo"><!--In�cio da div tudo-->
        <div id="topo"><!--In�cio da div topo-->
        <h1>Blog <span>do Teixeira</span></h1>
        <div id="sobre"><!--In�cio da div sobre-->
        <p>Teixeira teve um bom aproveitamento em diversos cursos da área de WebDesign e WebMaster. Atualmente aposentado tem esse espaço para postar comentários, artigos, reportagens, pesquisas. Tudo que ache relevante para o debate e a livre expressão 	de opiniões.</p>
        </div>
        <!--Fim da div sobre-->
        <ul id="nav"><!--In�cio da div nav-->
            <li><a href="index.html">Inicial</a></li>
            <li><a href="politica.html">Política</a></li>
            <li><a href="hobby.html">hobby</a></li>
            <li><a href="informatica.html">Informática</a></li>
            <li><a href="religiao.html">Religião</a></li>
            <li><a href="pesquisa.html">Pesquisa</a></li>
            <li><a href="samba.html">Samba</a></li>
            <li><a href="index.html">Eu indico</a></li>
            <li><a href="contatos.html">Contatos</a></li>
            <li><a href="blog.html">Blog</a></li>
        </ul>
        </div>
        <!-- Fim da div#topo -->
        <div id="principal"><!--In�cio da div principal-->
        <form method="post" action="/cgi-bin/remotemail.cgi" id="form1" name="form1">
            <input type="hidden" name="recipient" value="carlos.teixeira@terra.com.br" />           <input type="hidden" value="http://informacaoteixeira.com.br/confirma_formulario.html" />           <input type="hidden" name="subject" value="Mensagem" />
      <table id="table">
        <tbody>
          <tr>
              <td colspan="2" id="td">
               <p class="p-top">Todas as mensagens serão lidas, analisadas e publicadas em seguida. Todos os campos    são </p>
               <p>obrigatórios. Muito obrigado.</p>
               </td>
          </tr>
            <tr>
               <td id="td-nome"><span>Nome:</span>
           </td>
             <td id="td-nome">
               <input type="text" id="Nome" size="60" name="Nome" />
  	     </td>
            </tr>
            <tr>
             <td id="td-email"><span>E-mail</span>
             </td>
                 <td id="td-email">
                   <input type="text" id="Email" size="45" name="Email" />
        	 </td>
             </tr>
             <tr>
                  <td id="td-opcao"><span>Marque opção/assunto:</span>
        	  </td>
                  <td id="td-opcao">
                 <select id="Assunto" name="Assunto">
                    <option value="0">Escolha uma opção para assunto</option>
                    <option value="1">Política</option>
                    <option value="2">Hobby</option>
                    <option value="3">Informática</option>
                    <option value="4">Religião</option>
                    <option value="5">Pesquisa</option>
                    <option value="6">Samba</option>
                  </select>
                   </td>
             </tr>
                   <tr>
                     <td id="td-mensagem">
                       <span>Sua mensagem:</span>
  		     </td>
                        <td id="td-mensagem">
                         < textarea name="Mensagem" cols="60" rows="10" id="Mensagem"& gt;<!-- textarea-->
  		         </td>
                    </tr>
                         <tr>
                          <td id="td-mensagem">
                           <span> </span>
   		          </td>
                       
                          <td>
                         <input type="submit" value="Enviar" name="Enviar" /> 
                         </td>
                    </tr>
                </tbody>
            </table>
            <p> </p>
            <p> </p>
        </form>
        </div>
        <!-- Fim da div#principal -->
        <div id="rodape"><!--In�cio da div#rodape -->
        <p>Site criado em 2010 por Teixieira - Copyright ®  2010 - Rio de Janeiro/RJ</p>
        </div>
        <!--Fim da div#rodape-->  </div>
        <!-- Fim da div#tudo -->
    </body>
</html>

 

 

 

Por favor observe como fica em: http://informacaoteixeira.com.br/

"Contatos"

 

Desculpe mas vou repetir no meu computador não apresenta esse erro. Porque no local da hopedagem apresenta erro.

Será que não estou fechando alguma tr, td etc. Mas não daria erro também localmente?

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.