[RESOLVIDO]Mascara de CPF e Data

olá pessoal do GUJ estou tendo dificuldades para validadar CPF e Data fiz de um jeito e não deu certo
para localizar O CPF e a Data coloquei comentários em Verde


<!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 formatar(src, mask)
{
  var i = src.value.length;
  var saida = mask.substring(0,1);
  var texto = mask.substring(i)
if (texto.substring(0,1) != saida)
  {
                src.value += texto.substring(0,1);
  }
}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MEDTRAB webapp</title>
<style type="text/css">
body,td,th {
	font-family: "Comic Sans MS", cursive;
	font-size: 16px;
	color: #900;
}
body {
	background-color: #FF9;
}
a:link {
	color: #900;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #900;
}
a:hover {
	text-decoration: underline;
	color: #900;
}
a:active {
	text-decoration: none;
	color: #900;
}
</style>
</head>

<body>
<p>Se eu utilizar &ccedil; e n&atilde;o for com codifica&ccedil;&atilde;o adequada o que acontecer&aacute;?
</p>
<p>&nbsp;</p>
<div align="center">
  <table width="85%" border="0">
    <tr>
      <td background="fundo.jpg" colspan="2" height="100"><div align="center">MEDTRAB Cl&iacute;nica de Medicina do Trabalho </div></td>
    </tr>
    <tr>
      <td bgcolor="#cccccc" width="25%" height="50"><a href="index.html">Home</a></td>
      <td width="68%" rowspan="5" bgcolor="#ff9"><p align="center"><strong><font size="+2">Inclus&atilde;o de Pacientes</font></strong></p>
        <form id="form1" name="form1" method="post" action="P_ins_mensagem.html">
          <p><font size="+1">Preencha os campos abaixo:</font></p>
          <table width="80%" border="0">
            <tr>
              <td width="30%">Nome</td>
              <td width="70%"><label for="nome"></label>
              <input name="nome" type="text" id="nome" size="60" maxlength="50" /></td>
            </tr>
            <tr>
               <td>Data de Nascimento</td> //PRIMEIRA SITUAÇÃO
              <td><label for="data"></label>
              <P><input name="data" id="data" onkeypress="formatar(this, ##/##/####')" value=" " size="20" maxlength="10" maxlengt="8"></P>
              </td>
            </tr>
            <tr>
              <td>CPF</td>  //SEGUNDA SITUAÇÃO
              <td><label for="cpf"></label>
              <P><INPUT onkeypress="formatar(this,'000.000.000-00')" id=dta 
                style="WIDTH: 100px; HEIGHT: 17px" maxLength=14 size=30 name=dta 
                background-color:#FFFFFF? padding-bottom:1px; padding-top:1px; 
                padding-right:4px; padding-left:4px; font-weight:700; 8pt; font-size: Verdana; 
                font-family: border-width:1px; style:dashed;></P>
              </td>
            </tr>
            <tr>
              <td>Sexo</td>
              <td><input type="radio" name="radio" id="M" value="m" />
              <label for="M">Masculino 
                <input type="radio" name="radio" id="F" value="f" />
              Feminino</label></td>
            </tr>
            <tr>
              <td>Endere&ccedil;o</td>
              <td><label for="endereco"></label>
              <input name="endereco" type="text" id="endereco" size="60" maxlength="55" /></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><input type="reset" name="Limpar campos" id="Limpar campos" value="Limpar Campos" /> <input type="submit" name="Enviar Dados" id="Enviar Dados" value="Enviar Dados" /></td>
            </tr>
          </table>
      </form></td>
    </tr>
    <tr>
      <td height="50" bgcolor="#ccff99"><a href="Pacientes.html">Pacientes</a></td>
    </tr>
    <tr>
      <td height="50" bgcolor="#cccccc"><a href="Consultas.html">Consultas</a></td>
    </tr>
    <tr>
      <td height="50" bgcolor="#cccccc"><a href="Funcionarios.html">Funcion&aacute;rios</a></td>
    </tr>
    <tr>
      <td height="50" bgcolor="#cccccc"><a href="Ajuda.html">Ajuda</a></td>
    </tr>
    <tr>
      <td background="fundo.jpg" colspan="2" height="50"><div align="center">Desenvolvido por Rob&eacute;rio&copy; Todos os direitos reservados</div></td>
    </tr>
  </table>
</div>
<p>&nbsp;</p>
</body>
</html>

amigo, existe diversas funções para validação e mascara para cpf.

teste mais algumas.

o problema é que já testei várias , e nenhuma deu certo , se tiver um exemplo ai , agradeceria

function formatarCpf(cpf){ cpf = cpf.replace(/\D/g,""); cpf = cpf.replace(/(\d{3})(\d)/,"$1.$2"); cpf = cpf.replace(/(\d{3})(\d)/,"$1.$2"); cpf = cpf.replace(/(\d{3})(\d{1,2})$/,"$1-$2"); return cpf; } function formatarData(data){ data = data.replace(/\D/g,""); data = data.replace(/(\d{2})(\d)/,"$1/$2"); data = data.replace(/(\d{2})(\d)/,"$1/$2"); return data; }

Fonte: http://www.htmlstaff.org/ver.php?id=22476

Obs: foi um dos primeiros links do google pesquisando isso: mascara cpf javascript

obrigado por ter respondido digao mas continua não dando certo , essa página que voce me mostrou eu ja tentei fazer por ela e não obtive exito , e porque nesse exemplo do site não deu certo?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Modelo 1 - Mascaras em javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- JS DAS MASCARAS -->
<script src="mascara.js">
 /*Função Pai de Mascaras*/
    function Mascara(o,f){
        v_obj=o
        v_fun=f
        setTimeout("execmascara()",1)
    }
    
    /*Função que Executa os objetos*/
    function execmascara(){
        v_obj.value=v_fun(v_obj.value)
    }
    
    /*Função que Determina as expressões regulares dos objetos*/
    function leech(v){
        v=v.replace(/o/gi,"0")
        v=v.replace(/i/gi,"1")
        v=v.replace(/z/gi,"2")
        v=v.replace(/e/gi,"3")
        v=v.replace(/a/gi,"4")
        v=v.replace(/s/gi,"5")
        v=v.replace(/t/gi,"7")
        return v
    }
    
    /*Função que permite apenas numeros*/
    function Integer(v){
        return v.replace(/\D/g,"")
    }
    
    /*Função que padroniza telefone (11) 4184-1241*/
    function Telefone(v){
        v=v.replace(/\D/g,"")                 
        v=v.replace(/^(\d\d)(\d)/g,"($1) $2") 
        v=v.replace(/(\d{4})(\d)/,"$1-$2")    
        return v
    }
    
    /*Função que padroniza telefone (11) 41841241*/
    function TelefoneCall(v){
        v=v.replace(/\D/g,"")                 
        v=v.replace(/^(\d\d)(\d)/g,"($1) $2")    
        return v
    }
    
    /*Função que padroniza CPF*/
    function Cpf(v){
        v=v.replace(/\D/g,"")                    
        v=v.replace(/(\d{3})(\d)/,"$1.$2")       
        v=v.replace(/(\d{3})(\d)/,"$1.$2")       
                                                 
        v=v.replace(/(\d{3})(\d{1,2})$/,"$1-$2") 
        return v
    }
    
    /*Função que padroniza CEP*/
    function Cep(v){
        v=v.replace(/D/g,"")                
        v=v.replace(/^(\d{5})(\d)/,"$1-$2") 
        return v
    }
    
    /*Função que padroniza CNPJ*/
    function Cnpj(v){
        v=v.replace(/\D/g,"")                   
        v=v.replace(/^(\d{2})(\d)/,"$1.$2")     
        v=v.replace(/^(\d{2})\.(\d{3})(\d)/,"$1.$2.$3") 
        v=v.replace(/\.(\d{3})(\d)/,".$1/$2")           
        v=v.replace(/(\d{4})(\d)/,"$1-$2")              
        return v
    }
    
    /*Função que permite apenas numeros Romanos*/
    function Romanos(v){
        v=v.toUpperCase()             
        v=v.replace(/[^IVXLCDM]/g,"") 
        
        while(v.replace(/^M{0,4}(CM|CD|D?C{0,3})(XC|XL|L?X{0,3})(IX|IV|V?I{0,3})$/,"")!="")
            v=v.replace(/.$/,"")
        return v
    }
    
    /*Função que padroniza o Site*/
    function Site(v){
        v=v.replace(/^http:\/\/?/,"")
        dominio=v
        caminho=""
        if(v.indexOf("/")>-1)
            dominio=v.split("/")[0]
            caminho=v.replace(/[^\/]*/,"")
            dominio=dominio.replace(/[^\w\.\+-:@]/g,"")
            caminho=caminho.replace(/[^\w\d\+-@:\?&=%\(\)\.]/g,"")
            caminho=caminho.replace(/([\?&])=/,"$1")
        if(caminho!="")dominio=dominio.replace(/\.+$/,"")
            v="http://"+dominio+caminho
        return v
    }

    /*Função que padroniza DATA*/
    function Data(v){
        v=v.replace(/\D/g,"") 
        v=v.replace(/(\d{2})(\d)/,"$1/$2") 
        v=v.replace(/(\d{2})(\d)/,"$1/$2") 
        return v
    }
    
    /*Função que padroniza DATA*/
    function Hora(v){
        v=v.replace(/\D/g,"") 
        v=v.replace(/(\d{2})(\d)/,"$1:$2")  
        return v
    }
    
    /*Função que padroniza valor monétario*/
    function Valor(v){
        v=v.replace(/\D/g,"") //Remove tudo o que não é dígito
        v=v.replace(/^([0-9]{3}\.?){3}-[0-9]{2}$/,"$1.$2");
        //v=v.replace(/(\d{3})(\d)/g,"$1,$2")
        v=v.replace(/(\d)(\d{2})$/,"$1.$2") //Coloca ponto antes dos 2 últimos digitos
        return v
    }
    
    /*Função que padroniza Area*/
    function Area(v){
        v=v.replace(/\D/g,"") 
        v=v.replace(/(\d)(\d{2})$/,"$1.$2") 
        return v
        
    }


</script>
</head>
<body>
<table width="100%" border="0">
    <tr>
        <td colspan="2" align="center"><strong>Exemplos de Funções de mascaras em javascript</strong></td>
    </tr>
    <tr bgcolor="#e1e1e1">
        <td width="13%">[Só numeros]</td>
        <td width="87%"><input name="int" type="text" id="int" onKeyDown="Mascara(this,Integer);" onKeyPress="Mascara(this,Integer);" onKeyUp="Mascara(this,Integer);"></td>
    </tr>
    <tr>
        <td width="13%">[Telefone]</td>
        <td width="87%"><input name="tel" type="text" id="tel" maxlength="14" onKeyDown="Mascara(this,Telefone);" onKeyPress="Mascara(this,Telefone);" onKeyUp="Mascara(this,Telefone);"></td>
    </tr>
    <tr bgcolor="#e1e1e1">
        <td width="13%">[CPF]</td>
        <td width="87%"><input name="cpf" type="text" id="cpf" maxlength="14" onKeyDown="Mascara(this,Cpf);" onKeyPress="Mascara(this,Cpf);" onKeyUp="Mascara(this,Cpf);"></td>
    </tr>
    <tr>
        <td width="13%">[Cep]</td>
        <td width="87%"><input name="cep" type="text" id="cep" maxlength="9" onKeyDown="Mascara(this,Cep);" onKeyPress="Mascara(this,Cep);" onKeyUp="Mascara(this,Cep);"></td>
    </tr>
    <tr bgcolor="#e1e1e1">
        <td width="13%">[CNPJ]</td>
        <td width="87%"><input name="cnpj" type="text" id="cnpj" maxlength="18" onKeyDown="Mascara(this,Cnpj);" onKeyPress="Mascara(this,Cnpj);" onKeyUp="Mascara(this,Cnpj);"></td>
    </tr>
    <tr>
        <td width="13%">[Romanos]</td>
        <td width="87%"><input name="rom" type="text" id="rom"  onKeyDown="Mascara(this,Romanos);" onKeyPress="Mascara(this,Romanos);" onKeyUp="Mascara(this,Romanos);"></td>
    </tr>
    <tr bgcolor="#e1e1e1">
        <td width="13%">[Site]</td>
        <td width="87%"><input name="sit" type="text" id="sit"  onKeyDown="Mascara(this,Site);" onKeyPress="Mascara(this,Site);" onKeyUp="Mascara(this,Site);"></td>
    </tr>
    <tr>
        <td width="13%">[Data]</td>
        <td width="87%"><input name="date" type="text" id="date" maxlength="10" onKeyDown="Mascara(this,Data);" onKeyPress="Mascara(this,Data);" onKeyUp="Mascara(this,Data);"></td>
    </tr>
    <tr bgcolor="#e1e1e1">
        <td width="13%">[Area Valor]</td>
        <td width="87%"><input name="arevalo" type="text" id="arevalo"  onKeyDown="Mascara(this,Area);" onKeyPress="Mascara(this,Area);" onKeyUp="Mascara(this,Area);"></td>
    </tr>
</table>
</body>
</html>

voce pode usar em css

<h:outputText value="CPF: " /> <p:inputMask value="#{bean.cpf}" mask="999.999.999-99"/>

Você chegou a tentar achar o erro? depurar no FireBug ou qualquer outro similar?
O método que eu te passei funcionou normalmente aqui.

segue 2 links usando jquery com mask

http://digitalbush.com/projects/masked-input-plugin/

isso é de certeza que funciona …

Abraço

[quote=RiQuInHo_$_$]voce pode usar em css

<h:outputText value="CPF: " /> <p:inputMask value="#{bean.cpf}" mask="999.999.999-99"/>[/quote]

A tela dele é HTML puro, não tem como usar os componentes.

ta ae o teu form corrigido …

1º cuidar os parametros de html tem ", corrigi o campo CPF tava errado…
2º quando copiar um campo de algum lugar certifique-se de trocar o nome dos campos
3º não se acustume a receber td de mao bjada :lol:

[size=18][color=red]só baixa no teu projeto as libs e corrige o src… [/color][/size]

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
http://digitalbush.com/files/jquery/maskedinput/rc3/jquery.maskedinput.js


<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://digitalbush.com/files/jquery/maskedinput/rc3/jquery.maskedinput.js" type="text/javascript"></script>
<script>
jQuery(function($){
   $(".datas").mask("99/99/9999");
   $("#cpf").mask("999.999.999-99");
});
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MEDTRAB webapp</title>
<style type="text/css">
body,td,th {
	font-family: "Comic Sans MS", cursive;
	font-size: 16px;
	color: #900;
}
body {
	background-color: #FF9;
}
a:link {
	color: #900;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #900;
}
a:hover {
	text-decoration: underline;
	color: #900;
}
a:active {
	text-decoration: none;
	color: #900;
}
</style>
</head>

<body>
<p>Se eu utilizar ç e não for com codificação adequada o que acontecerá?
</p>
<p> </p>
<div align="center">
  <table width="85%" border="0">
    <tr>
      <td background="fundo.jpg" colspan="2" height="100"><div align="center">MEDTRAB Clínica de Medicina do Trabalho </div></td>
    </tr>
    <tr>
      <td bgcolor="#cccccc" width="25%" height="50"><a href="index.html">Home</a></td>
      <td width="68%" rowspan="5" bgcolor="#ff9"><p align="center"><strong><font size="+2">Inclusão de Pacientes</font></strong></p>
        <form id="form1" name="form1" method="post" action="P_ins_mensagem.html">
          <p><font size="+1">Preencha os campos abaixo:</font></p>
          <table width="80%" border="0">
            <tr>
              <td width="30%">Nome</td>
              <td width="70%"><label for="nome"></label>
              <input name="nome" type="text" id="nome" size="60" maxlength="50" /></td>
            </tr>
            <tr>
               <td>Data de Nascimento</td> //PRIMEIRA SITUAÇÃO
              <td><label for="data"></label>
              <P><input name="data" id="data" class="datas" value=" " size="20" maxlength="10" maxlengt="8"></P>
              </td>
            </tr>
            <tr>
              <td>CPF</td>  //SEGUNDA SITUAÇÃO
              <td><label for="cpf"></label>
              <P><INPUT  id="cpf" 
                style="WIDTH: 100px; HEIGHT: 17px" maxLength="14" size="30" name="cpf"
                background-color:#FFFFFF? padding-bottom:1px; padding-top:1px; 
                padding-right:4px; padding-left:4px; font-weight:700; 8pt; font-size: Verdana; 
                font-family: border-width:1px; style:dashed;></P>
              </td>
            </tr>
            <tr>
              <td>Sexo</td>
              <td><input type="radio" name="radio" id="M" value="m" />
              <label for="M">Masculino 
                <input type="radio" name="radio" id="F" value="f" />
              Feminino</label></td>
            </tr>
            <tr>
              <td>Endereço</td>
              <td><label for="endereco"></label>
              <input name="endereco" type="text" id="endereco" size="60" maxlength="55" /></td>
            </tr>
            <tr>
              <td> </td>
              <td><input type="reset" name="Limpar campos" id="Limpar campos" value="Limpar Campos" /> <input type="submit" name="Enviar Dados" id="Enviar Dados" value="Enviar Dados" /></td>
            </tr>
          </table>
      </form></td>
    </tr>
    <tr>
      <td height="50" bgcolor="#ccff99"><a href="Pacientes.html">Pacientes</a></td>
    </tr>
    <tr>
      <td height="50" bgcolor="#cccccc"><a href="Consultas.html">Consultas</a></td>
    </tr>
    <tr>
      <td height="50" bgcolor="#cccccc"><a href="Funcionarios.html">Funcionários</a></td>
    </tr>
    <tr>
      <td height="50" bgcolor="#cccccc"><a href="Ajuda.html">Ajuda</a></td>
    </tr>
    <tr>
      <td background="fundo.jpg" colspan="2" height="50"><div align="center">Desenvolvido por Robério© Todos os direitos reservados</div></td>
    </tr>
  </table>
</div>
<p> </p>
</body>
</html>

a respeito do ç , até onde me lembro isso previne os erros de codificação …

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />