Estou com dificuldade para validar meu formulário, estou tentando validar com JavaScript, só que atá agora não consegui validar todos os campos.
Ele só valida o campo que está por último no código. Por exemplo, no código, ele valida o nome, mas não valida o telefone. Estou fazendo ele tudo junto, HTML junto com o JavaScript:
function formatar(mascara, documento) {
var i = documento.value.length;
var saida = mascara.substring(0, 1);
var texto = mascara.substring(i)
if (texto.substring(0, 1) != saida) {
documento.value += texto.substring(0, 1);
}
}
function validar() {
value = document.getElementById("nascimento").value;
re = /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/;
if (re.test(value)) {
document.troca.submit();
} else {
alert('Data de Nascimento Inválida');
form.nascimento.focus();
return false;
}
}
function validar() {
value = document.getElementById("cpf").value;
re = /([0-9]{2}[\.]?[0-9]{3}[\.]?[0-9]{3}[\/]?[0-9]{4}[-]?[0-9]{2})|([0-9]{3}[\.]?[0-9]{3}[\.]?[0-9]{3}[-]?[0-9]{2})/g
if (re.test(value)) {
document.troca.submit();
} else {
alert('CPF Inválido');
form.cpf.focus();
return false;
}
}
function validar() {
value = document.getElementById("tel").value;
re = /^[0-9]{2}-[0-9]{5}-[0-9]{4}/g;
if (re.test(value)) {
document.troca.submit();
} else {
alert('Telefone Inválido');
form.tel.focus();
return false;
}
}
function validar() {
value = document.getElementById("nome").value;
re = /^[a-zA-ZéúíóáÉÚÍÓÁèùìòàçÇÈÙÌÒÀõãñÕÃÑêûîôâÊÛÎÔÂëÿüïöäËYÜÏÖÄ\-\ \s]+$/;
if (re.test(value)) {
document.troca.submit();
} else {
alert('Nome Inválido');
form.nome.focus();
return false;
}
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Cadastro</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico" />
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<form class="login100-form validate-form" action="cadastro.php" method="POST" name="form" id="form" onsubmit="return validar();">
<span class="login100-form-title p-b-26">
Cadastrar Cliente
</span>
<div class="wrap-input100 ">
<input class="input100" type="text" name="nome" id="nome" required autocomplete="off" />
<span class="focus-input100" data-placeholder="Nome"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Telefone inválido">
<input class="input100" type="Tel" name="tel" id="tel" required autocomplete="off" maxlength="13" minlength="13" OnKeyPress="formatar('##-#####-####', this)" />
<span class="focus-input100" data-placeholder="Telefone"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Email inválido">
<input class="input100" type="email" name="email" id="email" required autocomplete="off" />
<span class="focus-input100" data-placeholder="E-mail"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Data inválida">
<input class="input100" type="text" name="nascimento" id="nascimento" required autocomplete="off" maxlength="10" minlength="10" OnKeyPress="formatar('##/##/####', this)" />
<span class="focus-input100" data-placeholder="Nascimento"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="CPF inválido">
<input class="input100" type="Tel" name="cpf" id="cpf" autocomplete="off" required maxlength="14" minlength="14" OnKeyPress="formatar('###.###.###-##', this)" />
<span class="focus-input100" data-placeholder="CPF"></span>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button type="submit" class="login100-form-btn" onclick="return validar()">
Confirmar
</button>
</div>
</div>
</form>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div><a href="painel.html"><button class="login100-form-btn">Voltar</button></a>
</div>
</div>
</div>
</div>
</div>
<div id="dropDownSelect1"></div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/daterangepicker/moment.min.js"></script>
<script src="vendor/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
<script src="vendor/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
<script src="js/main.js"></script>
</body>
</html>