Try this here:
function muitoCurto(campo, nome, tamanho) {
if (campo.value.length >= tamanho) return false;
alert("O conteúdo do campo '" + nome
+ "' deveria ter pelo menos " + tamanho + " caracteres."
+ " Por favor, preencha-o corretamente.");
return true;
}
function tamanhoErrado(campo, nome, tamanho) {
if (campo.value.length === tamanho) return false;
alert("O conteúdo do campo '" + nome
+ "' deveria ter exatamente " + tamanho + " caracteres. "
+ "Por favor, preencha-o corretamente.");
return true;
}
function naoNumerico(campo, nome) {
if (!isNaN(campo.value)) return false;
alert("Digite somente números no campo '" + nome + "', por favor.");
return true;
}
function diferentes(campo1, nome1, campo2, nome2) {
if (campo1.value === campo2.value) return false;
alert("Os campos '" + nome1 + "' e '" + nome2 + "' devem ser iguais.");
return true;
}
function validarFormulario() {
var cad = document.getElementById('cad');
if (muitoCurto(cad.txtnome, 'Nome', 2)) return;
if (muitoCurto(cad.txtsobrenome, 'Sobrenome', 2)) return;
if (tamanhoErrado(cad.txtCPF, 'CPF', 11)) return;
if (tamanhoErrado(cad.txtDDD, 'DDD', 2)) return;
if (muitoCurto(cad.txtContato, 'Nº do telefone', 8)) return;
if (muitoCurto(cad.txtEmail1, 'E-mail', 10)) return;
if (muitoCurto(cad.txtRua, 'Logradouro', 3)) return;
if (muitoCurto(cad.txtBairro, 'Bairro', 3)) return;
if (muitoCurto(cad.txtCidade, 'Cidade', 3)) return;
if (muitoCurto(cad.txtNumero, 'Número do endereço', 1)) return;
if (tamanhoErrado(cad.txtCep, 'CEP', 8)) return;
if (muitoCurto(cad.txtLogin, 'Nome de usuário', 7)) return;
if (muitoCurto(cad.txtsenha, 'Senha', 6)) return;
if (muitoCurto(cad.txtCsenha, 'Confirmação da senha', 6)) return;
if (naoNumerico(cad.txtCPF, 'CPF')) return;
if (naoNumerico(cad.txtDDD, 'DDD')) return;
if (naoNumerico(cad.txtContato, 'Nº do telefone')) return;
//if (naoNumerico(cad.txtNumero, 'Número')) return;
if (naoNumerico(cad.txtCep, 'CEP')) return;
if (diferentes(cad.txtsenha, 'Senha', cad.txtCsenha, 'Confirmação da Senha')) return;
if (diferentes(cad.txtEmail1, 'E-mail', cad.txtEmail2, 'Confirmação de E-mail')) return;
if (cad.txtdata_nasc.value.length !== 10) {
alert("Formato de 'data de nascimento' inválido."
+ " Por favor, preencha-o corretamente.");
return;
}
if (!verificarCPF(cad.txtCPF.value)) {
alert("Os dígitos verificadores do CPF não conferem.");
return;
}
cad.submit();
}
function verificarCPF(strCpf) {
if (!/[0-9]{11}/.test(strCpf)) return false;
if (strCpf === "00000000000") return false;
var soma = 0;
for (var i = 1; i <= 9; i++) {
soma += parseInt(strCpf.substring(i - 1, i)) * (11 - i);
}
var resto = soma % 11;
if (resto === 10 || resto === 11 || resto < 2) {
resto = 0;
} else {
resto = 11 - resto;
}
if (resto !== parseInt(strCpf.substring(9, 10))) {
return false;
}
soma = 0;
for (var i = 1; i <= 10; i++) {
soma += parseInt(strCpf.substring(i - 1, i)) * (12 - i);
}
resto = soma % 11;
if (resto === 10 || resto === 11 || resto < 2) {
resto = 0;
} else {
resto = 11 - resto;
}
if (resto !== parseInt(strCpf.substring(10, 11))) {
return false;
}
return true;
}
<form id="cad" method="post" action="#" required>
<h3>Dados pessoais</h3>
Nome: <input type="text" name="txtnome" maxlength="40" required />
<br>
Sobrenome: <input type="text" name="txtsobrenome" maxlength="30" required />
<br>
Data de nascimento: <input type="date" name="txtdata_nasc" required />
<br>
CPF: <input type="text" id="cpf1" name="txtCPF" maxlength="11" required />
<br>
<h3>Dados para Contato</h3>
DDD: <input type="text" name="txtDDD" placeholder="Ex: (###)" maxlength="2" required /><br>
Tipo: <input type="radio" name="rbT" value="Celular" checked />Celular
<input type="radio" name="rbT" value="Telefone" />Telefone
<br>
Nº: <input type="tel" name="txtContato" maxlength="9" required />
<br>
E-mail: <input type="email" name="txtEmail1" maxlength="50" id="Email1" placeholder="[email protected]" required />
<br>
Confirmação de E-mail: <input type="email" name="txtEmail2" maxlength="50" id="Email2" required />
<br>
<h3>Dados do Endereço</h3>
Logradouro: <input type="text" name="txtRua" maxlength="50" required />
<br>
Bairro: <input type="text" name="txtBairro" maxlength="35" required />
<br>
Cidade: <input type="text" name="txtCidade" maxlength="25" required />
<br>
Estado:
<select name="cbEstado" required>
<option>Acre</option>
<option>Alagoas</option>
<option>Amapá</option>
<option>Amazonas</option>
<option>Bahia</option>
<option>Brasília</option>
<option>Ceará</option>
<option>Espírito Santo</option>
<option>Goiás</option>
<option>Maranhão</option>
<option>Mato Grosso</option>
<option>Mato Grosso do Sul</option>
<option>Minas Gerais</option>
<option>Pará</option>
<option>Paraíba</option>
<option>Paraná</option>
<option>Pernambuco</option>
<option>Piauí</option>
<option>Rio de Janeiro</option>
<option>Rio Grande do Norte</option>
<option>Rio Grande do Sul</option>
<option>Rondônia</option>
<option>Roraima</option>
<option>Santa Catarina</option>
<option>São Paulo</option>
<option>Sergipe</option>
<option>Tocantins</option>
</select>
<br>
Número: <input type="text" name="txtNumero" maxlength="7" required />
<br>
CEP: <input type="text" name="txtCep" placeholder="Ex: #####-###" maxlength="8" required />
<br>
Complemento: <input type="text" name="txtComplemento" maxlength="40" />
<br>
<h3>Dados da conta</h3>
Nome de usuário: <input type="text" name="txtLogin" required maxlength="20" />
<br>
Senha: <input type="password" name="txtsenha" required maxlength="20" />
<br>
Confirmação da senha: <input type="password" name="txtCsenha" required maxlength="20" />
<br>
Tipo de usuário: <input type="radio" name="rb" value="Usuario" checked />Cliente
<input type="radio" name="rb" value="Tecnico" />Técnico
<br>
<button type="button" id="btn1" onclick='javascript: validarFormulario()'>Cadastrar</button>
</form>
Stackoverflow doesn’t let you post the entire executable HTML due to various reasons. So, the ideal HTML structure would be this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cadastro</title>
<script type="text/javascript" src="javascrito.js"></script>
</head>
<body>
<!--
COPIE E COLE O HTML ACIMA AQUI!
-->
</body>
</html>
There were some errors in your code, such as using VerificaCPF
and verificarCPF
, note that there are differences in spellings.
There were also two buttons defined in different ways, which ended up confusing and none of them were right, one was half right and half wrong and the other was half right and the other half wrong.
The CEP and CPF fields were the size of the maxlength
wrong.
The instruction with the submit();
was in the wrong place! She was supposed to stay out of the last if
.
Note that street numbers are not necessarily numerical. For example, in 2015, I lived at 3524A and my neighbor was 3524B. In addition, unnumbered streets are often represented with "s/n".
There are names and surnames with two letters, including personally know two people, descendants of Chinese, with the surname "Li". I’ve seen the first name only have two letters too.
As you can see, I have also greatly simplified the verification logic of your form.
has a Function in jquery that does this friend check
– Tiago Ferezin
your doubt is like calling?
– Laerte
There is already a question (with answer) to guide you: https://answall.com/questions/51340/comorvalidar-cpf-no-lado-do-cliente-com-script
– Vinícius
@Laerte yes, I’m doubting how to call it
– sdkamda2323