1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Validações Html e javascript

Discussão em 'Web Development' iniciada por Alma_Mater, 11 de Junho de 2009. (Respostas: 4; Visualizações: 757)

  1. Alma_Mater

    Alma_Mater Power Member

    Boas Amigos. Tenho um formulário em HTML e as respectivas validações em javascript. Já fiz a ligação do .js ao html e testando no browser não faz nenhuma validação. Eu sou novo nestas coisas e é a primeira validação que estou a fazer. O codigo javascript tirei da net e parece que esta bem feito. Que será que tenho de fazer? É necessario mais alguma coisa que a chamada do código ao Html? Se me pudessem ajudar agradecia imenso, é para uma cadeira da faculdade.

    Obrigado.
     
  2. hYpe

    hYpe [email protected] Member

    Sem ver o html nem o js que estás a tentar executar vai ser complicado de ajudar.

    Coloca aqui o código que estás a usar.
     
  3. Alma_Mater

    Alma_Mater Power Member

    Obrigado por responderes.

    O codigo Html:

    Código:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Registo</title>
    <link href="../css/estilos_look.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript" type="text/javascript" src="validar_registo.js"></script>
    <style type="text/css">
    <!--
    .style1 {
    	font-size: 14px
    }
    .style2 {font-size: 18px}
    .style3 {color: #000000}
    .style5 {color: #000000; font-size: 10px; }
    .style6 {
    	font-size: 10px
    }
    -->
    </style>
    </head>
    
    <body>
    <!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag-->
    <!-- ******** BEGIN ALLWEBMENUS CODE FOR menu ******** -->
    <script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu",awmBN="630";awmAltUrl="";</script><script charset="UTF-8" src="../menu.js" type="text/javascript"></script><script type="text/javascript">awmBuildMenu();</script>
    <!-- ******** END ALLWEBMENUS CODE FOR menu ******** -->
    
    <!-- ******** BEGIN ALLWEBMENUS CODE FOR menulateral ******** -->
    <script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menulateral",awmBN="630";awmAltUrl="";</script><script charset="UTF-8" src="../menulateral.js" type="text/javascript"></script><script type="text/javascript">awmBuildMenu();</script>
    <!-- ******** END ALLWEBMENUS CODE FOR menulateral ******** -->
    
    
    
    
    
    
    
    
    <div id="pagina">
      <table width="820" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="15" bgcolor="#0193CF">&nbsp;</td>
          <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td><img src="../imagens/logo2.jpg" alt="LooKDivine" width="812" height="140" /></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td><table id="awmAnchor-menu" width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td>&nbsp;</td>
                    </tr>
                </table></td>
              </tr>
              <tr>
                <td><div align="center">
                    <p>&nbsp;</p>
                  <p><span class="style2">Registo de Clientes</span><br />
                        <br />
                    </p>
                </div></td>
              </tr>
              <tr>
                <td><table width="800" border="3" align="right" bordercolor="#0193CF" bgcolor="#F9FDFF">
                    <tr>
                      <td><form action="" method="post" name="form_registo" class="style1" id="form_registo"  onsubmit="valida(this)">
                          <table width="100%" border="0">
                            <tr>
                              <td width="13%">Nome<span class="style3">&nbsp;*</span></td>
                              <td colspan="5"><input name="nome" type="text" id="nome" onblur="nomeValido(form_registo.nome.value)"size="50" maxlength="45" /></td>
                            </tr>
                            <tr>
                              <td>Morada&nbsp;<span class="style3">*</span></td>
                              <td colspan="5"><input name="morada" type="text" id="morada" size="45" maxlength="45" /></td>
                            </tr>
                            <tr>
                              <td>Código Postal&nbsp;<span class="style3">*</span></td>
                              <td width="33%"><input name="cpostal" type="text" id="cpostal" size="15" maxlength="8" />                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>
                              <td width="8%">Localidade&nbsp;<span class="style3">*</span></td>
                              <td colspan="3"><input name="localidade" type="text" id="localidade" onblur="nomeValido(form_registo.nome.value)" maxlength="20" /></td>
                            </tr>
                            <tr>
                              <td>País&nbsp;<span class="style3">*</span></td>
                              <td colspan="5"><input name="pais" type="text" id="pais" onblur="nomeValido(form_registo.nome.value)"  maxlength="20" /></td>
                            </tr>
                            <tr>
                              <td>Telefone</td>
                              <td><input name="telefone" type="text" id="telefone" maxlength="13" onblur="informacao(this)"/></td>
                              <td>Telemóvel</td>
                              <td colspan="3"><input name="telemovel" type="text" id="telemovel" size="17" maxlength="9" onblur="informacao(this)" /></td>
                            </tr>
                            <tr>
                              <td>NIF&nbsp;<span class="style3">*</span></td>
                              <td colspan="5"><input name="nif" type="text" id="nif" onblur="informacao(this)"/></td>
                            </tr>
                            <tr>
                              <td>Email&nbsp;<span class="style3">*</span></td>
                              <td colspan="5"><input name="email" type="text" id="email" size="40" onblur="isEmailAddr(form_registo.email.value)"/>                          </td>
                            </tr>
                            <tr>
                              <td>Username&nbsp;<span class="style3">*</td>
                              <td colspan="5">&nbsp;<input name="username" type="text" id="username" onblur="userValido(form_registo.username.value)" maxlength="20" /></td>
                            </tr>
                            <tr>
                              <td>Password<span class="style3">&nbsp;*</span></td>
                              <td><input name="password" type="password" id="password" onblur="passValida(form_registo.password.value)" /></td>
                              <td>Confirmar password<span class="style3">&nbsp;*</span></td>
                              <td colspan="3"><input type="password" name="confirmar" id="confirmar" /></td>
                            </tr>
                            <tr>
                              <td rowspan="2">Data de Nascimento&nbsp;</td>
                              <td rowspan="2" align="left" valign="middle"><input name="dnasc" type="text" id="dnasc" size="20" maxlength="10" />
                                &nbsp;
                                &nbsp;
                                &nbsp;
                                dd/mm/aaaa</td>
                              <td rowspan="2">Sexo&nbsp;:</td>
                              <td width="7%"><label>Feminino </label></td>
                              <td width="5%"><input type="radio" name="radio" id="feminino" value="feminino" /></td>
                              <td width="34%" rowspan="2">&nbsp;</td>
                            </tr>
                            <tr>
                              <td>Masculino</td>
                              <td width="5%"><input type="radio" name="radio" id="masculino" value="masculino" /></td>
                            </tr>
                            <tr>
                              <td>&nbsp;</td>
                              <td colspan="5">&nbsp;</td>
                            </tr>
                            <tr>
                              <td colspan="6"><div align="center"> <br />
                                      <input type="submit" name="registar" id="button" value="Registar" align="middle" />
                                </div>
                                  <div align="center"></div>
                                <span class="style5">* Campos de Preenchimento Obrigatório</span></td>
                            </tr>
                          </table>
                      </form>
                          <span class="style1">&nbsp;</span></td>
                    </tr>
                </table></td>
              </tr>
              <tr>
                <td><span class="style3">&nbsp;</span></td>
              </tr>
          </table></td>
        </tr>
      </table>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><div align="center" class="style6">________________________________________________________________________________________________________________________________________<br />
          by frienDESIGN</div></td>
      </tr>
    </table>
    </div>
    </body>
    </html>
    
    O codigo Javascript:
    Código:
    // JavaScript Document
    
    
    
    s=form_registo.password;
    
    function isEmailAddr(email){
    var result = false;
    var theStr = new String(email);
    var index = theStr.indexOf("@");
    if (index > 0){
    var pindex = theStr.indexOf(".",index);
    if ((pindex > index+1) && (theStr.length > pindex+1))
    result = true;
    }
    return result;
    }
    
    
    
    function inValidCharSet(str,charset){
    	var result = true;
    	for (var i=0;i<str.length;i++)
    		if (charset.indexOf(str.substr(i,1))<0) {
    			result = false;
    			break;
    		}
    	return result;
    }
    
    
    
    function nomeValido(str)
    {
    	return inValidCharSet(str, "ABCÇDEFGHIJKLMNOPQRSTUVXZWYÁÉÊÃabcdefghijklmnoprstuvxzwyáéã") {
    }
    
    
    function numerosValido(str)
    {
    	return inValidCharSet(str,"+0123456789");
    }
    
    function informacao(elem)
    {
    	if(elem.value.length < 9 || numerosValido(elem.value))	
    		document.form_registo.info.value = "Número mal inserido.Tem que ter no mínimo 9 números!!"
    }
    
    //validar username
    function userValido(str)
    {
    	return inValidCharSet(str,"ABCÇDEFGHIJKLMNOPQRSTUVXWYZabcçdefghijklmnopqrstuvxwyz._-");
    }
    
    
    function passValida(str)
    {
    	return inValidCharSet(str,"ABCÇDEFGHIJKLMNOPQRSTUVXWYZabcçdefghijklmnopqrstuvxwyz0123456789 ") 
    }
    
    //validar confirmar password
    function confirmarPass(s)					   
    {
    	if(s.confirmar.value!=s.password.value)
    	{
    		document.form_registo.info.value= "Password Incorrecta. A confirmação deve ser igual à Password!!!"
    	}
    
    }
    
    //validar data de nascimento
    function dataNasc()
    {
    	erro=0;
        hoje = new Date();
        anoAtual = hoje.getFullYear();
        barras = form_registo.dnasc.value.split("/");
        if (barras.length == 3)
    	{
            dia = barras[0];
            mes = barras[1];
            ano = barras[2];
            resultado = (!isNaN(dia) && (dia > 0) && (dia < 32)) && (!isNaN(mes) && (mes > 0) && (mes < 13)) && (!isNaN(ano) && (ano.length == 4) && (ano <= anoAtual && ano >= 1900));
              if (!resultado) 
    		  {
               		alert("Formato de data invalido!");
    				form_registo.dnasc.focus();
                  	return false;
              }
           } 
    	   else 
    	   {
              alert("Formato de data invalido!");
             form_registo.nascimento.focus();
              return false;
            }
    }
    
    //validar sexo 
    function sexoValido()
    {
    	if (!form_registo.sexo[0].checked && !d.sexo[1].checked)
    	{
                       alert("Escolha o sexo!")
                       return false;
            }
             return true;
    }
    
    function preenchido(str){
    if (str == '') {
    	alert('Este campo é de preenchimento obrigatório!');
    	return false;
    	}
    }
    
    
    function valida(form)
    {
    	var res = true;
    	
    	
    	if(form_registo.nome.value.length < 6 || nomeValido(form_registo.nome.value))
    	{
    		form_registo.nome.style.background = "#CCFFAA";
    		form_registo.nome.focus();
    		form_registo.nome.value = " ";
    		res = false;
    	}
    	if(form_registo.cpostal.value.lenght < 8 || numerosValido(form_registo.cpostal.value))
    	{
    		form_registo.cpostal.style.background = "#CCFFAA";
    		form_registo.cpostal.focus();
    		form_registo.cpostal.value = " ";
    		res = false;
    	}
    	if(form_registo.localidade.value.lenght < 3 || nomeValido(form_registo.localidade.value))
    	{
    		form_registo.localiddae.style.background = "#CCFFAA";
    		form_registo.localidade.focus();
    		form_registo.localidade.value = " ";
    		res = false;
    	}
    	if(form_registo.pais.value.lenght < 3 || nomeValido(form_registo.pais.value))
    	{
    		form_registo.pais.style.background = "#CCFFAA";
    		form_registo.pais.focus();
    		form_registo.pais.value = " ";
    		res = false;
    	}
    	if(form_registo.telefone.value.lenght < 9 || numerosValido(form_registo.telefone.value))
    	{
    		form_registo.telefone.style.background = "#CCFFAA";
    		form_registo.telefone.focus();
    		form_registo.telefone.value = " ";
    		res = false;
    	}
    	if(form_registo.telemovel.value.lenght < 9 || numerosValido(form_registo.telemovel.value))
    	{
    		form_registo.telemovel.style.background = "#CCFFAA";
    		form_registo.telemovel.focus();
    		form_registo.telemovel.value = " ";
    		res = false;
    	}
    	if(form_registo.nif.value.lenght < 9 || numerosValido(form_registo.nif.value))
    	{
    		form_registo.nif.style.background = "#CCFFAA";
    		form_registo.nif.focus();
    		form_registo.nif.value = " ";
    		res = false;
    	}
    	if(isEmailAddr(form_registo.email.value))
    	{
    		form_registo.email.style.background = "#CCFFAA";
    		form_registo.email.focus();
    		form_registo.email.value = " ";
    		res = false;
    	}
    	if(form_registo.username.value.lenght < 5 || userValido(form_registo.username.value))
    	{
    		form_registo.username.style.background = "#CCFFAA";
    		form_registo.username.focus();
    		form_registo.username.value = " ";
    		res = false;
    	}
    	if(form_registo.password.value.lenght < 5 || passValida(form_registo.password.value))
    	{
    		form_registo.password.style.background = "#CCFFAA";
    		form_registo.password.focus();
    		form_registo.password.value = " ";
    		res = false;
    	}
    	if(form_registo.dnasc.value.lenght < 10 || dataNasc(form_registo.dnasc.value))
    	{
    		form_registo.dnasc.style.background = "#CCFFAA";
    		form_registo.dnasc.focus();
    		form_registo.dnasc.value = " ";
    		res = false;
    	}
    		
    	
    	return res;
    	
    }
    
    
    
    	
    
    
    
    Se me conseguisses ajudar agradecia imenso. Espero que consigas ver o problema. Obrigado pelo teu tempo. Abraço.
     
  4. hYpe

    hYpe [email protected] Member

    Na linha 35 do js tens um { a mais.

    Mas o erro não é daí.. A questão é que, pelo menos em firefox, as validações que estás a fazer não funcionam.

    P.e. na funçao valida(form) isto: form_registo.nome.value.length não funciona.

    Tens que fazer qq coisa tipo document.getElementById('nome').length.. Assim já deve funcionar.
     
  5. Alma_Mater

    Alma_Mater Power Member

    Já consegui resolver o assunto. Andei de volta daquilo e decidi fazer de novo as validações javascript. Agora funciona bem, mas não consegui descobrir de onde era o erro. Substitui como tinhas disto em cima mas o erro continuava.

    Por vezes andamos de volta e não descobrimos e para não perder tempo mais vale começar de novo. Desde já agradeço a ajuda do hYpe. Obrigado.
     

Partilhar esta Página