Ir para conteúdo

POWERED BY:

Arquivado

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

Mr Crowley

JS - window.onSubmit, separar HTML do JS, como eu faco isso?

Por , em Javascript

Recommended Posts

Mr Crowley    0

Mr Crowley
Postado

Ola pessoal

 

eu queria separar a parte do HTML do JS na parte do submit

 

por exemplo 

<form name="form" id="form" method="post" onSubmit="return Valida();">

esta parte é a unica que falta pra eu separar o HTML do JS

tentei usar 

window.onSubmit = function(){
....
}
ou

window.onsubmit = function(){
....
}

mas nao deu certo

nao reconheceu

 

como eu faco para separar neste caso?

 

abs

T+

Compartilhar este post

Link para o post
Compartilhar em outros sites

klaygomes    0

klaygomes
Postado

document.getElementById('iddoform').onsubmit = function(){...}; <-- todos

document.getElementById('iddoform').attachEvent('onsubmit', function(){...}) <-- ie

document.getElementById('iddoform').addEventListener('submit', function(){...}) <-- firefox opera etc

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mr Crowley    0

Mr Crowley
Postado

document.getElementById('iddoform').onsubmit = function(){...}; <-- todos

document.getElementById('iddoform').attachEvent('onsubmit', function(){...}) <-- ie

document.getElementById('iddoform').addEventListener('submit', function(){...}) <-- firefox opera etc

 

valeu

fazendo os teste e logo mais retornando

 

abs

T+

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mr Crowley    0

Mr Crowley
Postado

document.getElementById('iddoform').onsubmit = function(){...}; <-- todos

document.getElementById('iddoform').attachEvent('onsubmit', function(){...}) <-- ie

document.getElementById('iddoform').addEventListener('submit', function(){...}) <-- firefox opera etc

 

funfou

ficou assim

 

document.getElementById('form').onsubmit = function(){
	return Valida();
}

código separada, nao tenho mais HTML misturado com JS. :)

 

obrigado

 

abs

T+

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ricardo Tirabyte    0

Ricardo Tirabyte
Postado

Também estou tentando separar mas não funciona o que valida os campos, ou seja são obrigatório, as mascara funciona, alguem pode me ajudar? Faz tempo que programei em PHP quero retornar ^^, vou postar os dois codigos completos:

 

HTML

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitonal.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
	<link rel="stylesheet" href="estilo.css" type="text/css" media="screen">
	<title>CADASTRO DE CLIENTES COM BANCO DE DADOS MYSQL E PHP</title>
	<script language="JavaScript" type="text/javascript" src="MascaraValidacao.js"></script>
</head>

<body>
<div class="nav-container-outer">
   <img src="imagens/nav-bg-e.jpg" alt="" class="float-left" />
   <img src="imagens/nav-bg-d.jpg" alt="" class="float-right" />
   <ul id="nav-container" class="nav-container">
	  <li><a class="item-primary" >Cadastro</a>
		 <ul style="width:150px;">
			<li><a href="cadastro.html" title="Incluir clientes" >Inclusão</a></li>
			<li><a href="a" title="Alterar dados" >Alteração</a></li>
		 </ul>
	   </li>
	   <li><span class="divider divider-vert" ></span></li>
	  <li><a class="item-primary" href="" >Consulta</a>
	   </li>
	   <li><span class="divider divider-vert" ></span></li>
	  <li><a class="item-primary" href="" ></a>
	   </li>
	   <li><span class="divider divider-vert" ></span></li>
	  <li class="clear"> </li>
   </ul>
</div>
<div class="centro">
<H3><center>CADASTRO</center> </H3>
 <form id="cadastro" name="cadastro" method="post" document.getElementById('cadastro').onsubmit="function(){return Valida();}" action="cadastro.php" />
  <table width="625" border="0">
	<tr>
	  <td width="69">Código:</td>
	  <td><input name="codigo" type="text" id="cod" size="12" maxlength="10" /><span class="asterisco">*</span></td>
	</tr>
	<tr>
	  <td>Nome:</td>
	  <td><input name="nome" type="text" id="nome" size="70" maxlength="60" /><span class="asterisco">*</span></td>
	</tr>
	<tr>
		<tr>
	<td>RG:</td>
	  <td><input name="rg" type="text" id="rg" onKeyPress="Mascara('RG',this,event);" size="15" maxlength="14" /><span class="asterisco">*</span></td>
	</tr>
	<tr>
		<tr>
	<td>CPF:</td>
	  <td><input name="cpf" type="text" id="cpf" onKeyPress="Mascara('CPF',this,event);" size="15" maxlength="14" /><span class="asterisco">*</span></td>
	</tr>
	<tr>
	  <td>Email:</td>
	  <td><input name="email" type="text" id="email" size="70" maxlength="60" /><span class="asterisco">*</span></td>
	</tr>
	<tr>
	  <td>Sexo:</td>
	  <td><input name="sexo" type="radio" value="Masculino" checked="checked" />Masculino 
		<input name="sexo" type="radio" value="Feminino" />Feminino<span class="asterisco">*</span> </td>
	</tr>
	<tr>
	  <td>DDD:</td>
	  <td>(<input name="ddd" type="text" id="ddd" size="4" maxlength="2" />)
		  Telefone:
		  <input name="telefone" type="text" id="telefone" onKeyPress="Mascara('TEL',this,event);" size="10" maxlength="9" /><span class="style3">Apenas números</span></td>
	</tr>
	<tr>
	  <td>Endereço:</td>
	  <td><input name="endereco" type="text" id="endereco" size="70" maxlength="70" /><span class="asterisco">*</span></td>
	</tr>
		<tr>
	<td>Bairro:</td>
	  <td><input name="bairro" type="text" id="bairro" maxlength="20" /><span class="asterisco">*</span></td>
	</tr>
	<tr>
	  <td>Cidade:</td>
	  <td><input name="cidade" type="text" id="cidade" maxlength="20" /><span class="asterisco">*</span></td>
	</tr>
	<tr>
	  <td>Estado:</td>
	  <td><select name="estado" id="estado">
		<option>Selecione...</option>
		<option value="AC">AC</option>
		<option value="AL">AL</option>
		<option value="AP">AP</option>
		<option value="AM">AM</option>
		<option value="BA">BA</option>
		<option value="CE">CE</option>
		<option value="ES">ES</option>
		<option value="DF">DF</option>
		<option value="MA">MA</option>
		<option value="MT">MT</option>
		<option value="MS">MS</option>
		<option value="MG">MG</option>
		<option value="PA">PA</option>
		<option value="PB">PB</option>
		<option value="PR">PR</option>
		<option value="PE">PE</option>
		<option value="PI">PI</option>
		<option value="RJ">RJ</option>
		<option value="RN">RN</option>
		<option value="RS">RS</option>
		<option value="RO">RO</option>
		<option value="RR">RR</option>
		<option value="SC">SC</option>
		<option value="SP">SP</option>
		<option value="SE">SE</option>
		<option value="TO">TO</option>
		  </select>
		<span class="asterisco">*</span></td>
	</tr>
	<tr>
	<td>CEP:</td>
	  <td><input name="cep" type="text" id="cep" onKeyPress="Mascara('CEP',this,event);" size="11" maxlength="10" onBlur="ValidaCep(cad.cep);" /><span class="asterisco">*</span></td>
	</tr>
	<tr>
	  <td>País:</td>
	  <td><input name="pais" type="text" id="pais" maxlength="20" /><span class="asterisco">*</span></td>
	</tr>
	<tr>
	  <td>Login:</td>
	  <td><input name="login" type="text" id="login" maxlength="12" /><span class="asterisco">*</span></td>
	</tr>
	<tr>
	  <td>Senha:</td>
	  <td><input name="senha" type="password" id="senha" maxlength="12" /><span class="asterisco">*</span></td>
	</tr>
	<tr>
	  <td colspan="2"><p>
		<input name="cadastrar" type="submit" id="cadastrar" value="Concluir Cadastro" /> 
		<input name="limpar" type="reset" id="limpar" value="Limpar Campos Preenchidos!" /><span class="asterisco"> Campos com * são obrigatórios!</span></p>
	  <div> </div>
	  </td>
	</tr>
  </table>		 
 </form>
</body>
</html>

O MascaraValidacao.js

// Documento JavaScript
function Mascara(tipo, campo, teclaPress)
{
	if (window.event)
	{
		var tecla = teclaPress.keyCode;
	} else {
		tecla = teclaPress.which;
	}
 
	var s = new String(campo.value);
	// Remove todos os caracteres à seguir: ( ) / - . e espaço, para tratar a string denovo.
	s = s.replace(/(\.|\(|\)|\/|\-| )+/g,'');
 
	tam = s.length + 1;
 
	if ( tecla != 9 && tecla != 8 ) {
		switch (tipo)
		{
		case 'CPF' :
			if (tam > 3 && tam < 7)
				campo.value = s.substr(0,3) + '.' + s.substr(3, tam);
			if (tam >= 7 && tam < 10)
				campo.value = s.substr(0,3) + '.' + s.substr(3,3) + '.' + s.substr(6,tam-6);
			if (tam >= 10 && tam < 12)
				campo.value = s.substr(0,3) + '.' + s.substr(3,3) + '.' + s.substr(6,3) + '-' + s.substr(9,tam-9);
		break;
 
		case 'CNPJ' :
 
			if (tam > 2 && tam < 6)
				campo.value = s.substr(0,2) + '.' + s.substr(2, tam);
			if (tam >= 6 && tam < 9)
				campo.value = s.substr(0,2) + '.' + s.substr(2,3) + '.' + s.substr(5,tam-5);
			if (tam >= 9 && tam < 13)
				campo.value = s.substr(0,2) + '.' + s.substr(2,3) + '.' + s.substr(5,3) + '/' + s.substr(8,tam-8);
			if (tam >= 13 && tam < 15)
				campo.value = s.substr(0,2) + '.' + s.substr(2,3) + '.' + s.substr(5,3) + '/' + s.substr(8,4)+ '-' + s.substr(12,tam-12);
		break;
 
		case 'TEL' :
			if (tam > 2 && tam < 4)
				campo.value = '(' + s.substr(0,2) + ') ' + s.substr(2,tam);
			if (tam >= 7 && tam < 11)
				campo.value = '(' + s.substr(0,2) + ') ' + s.substr(2,4) + '-' + s.substr(6,tam-6);
		break;
 
		case 'DATA' :
			if (tam > 2 && tam < 4)
				campo.value = s.substr(0,2) + '/' + s.substr(2, tam);
			if (tam > 4 && tam < 11)
				campo.value = s.substr(0,2) + '/' + s.substr(2,2) + '/' + s.substr(4,tam-4);
		break;
		
		case 'CEP' :
			if (tam == 3)
				campo.value = s.substr(0,2) + '.';
			if (tam == 6)
				campo.value = s.substr(0,2) + '.' + s.substr(2,3) + '-';
		break;
		}
	}
}

function Valida()
{
if(document.cadastro.nome.value=="")
{
alert("O Campo nome é obrigatório!");
return false;
}
else
if(document.cadastro.email.value=="")
{
alert("O Campo email é obrigatório!");
return false;
}
else
if(document.cadastro.endereco.value=="")
{
alert("O Campo endereço é obrigatório!");
return false;
}
else
if(document.cadastro.cidade.value=="")
{
alert("O Campo Cidade é obrigatório!");
return false;
}
else
if(document.cadastro.estado.value=="")
{
alert("O Campo Estado é obrigatório!");
return false;
}
else
if(document.cadastro.bairro.value=="")
{
alert("O Campo Bairro é obrigatório!");
return false;
}
else
if(document.cadastro.pais.value=="")
{
alert("O Campo país é obrigatório!");
return false;
}
else
if(document.cadastro.login.value=="")
{
alert("O Campo Login é obrigatório!");
return false;
}
else
if(document.cadastro.senha.value=="")
{
alert("Digite uma senha!");
return false;
}
else
return true;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito