1
I’m having difficulty validating my form, I’m trying to validate with Javascript, but until now I could not validate all fields.
It only validates the field that is last in the code. For example, in the code, it validates the name, but does not validate the phone. I’m doing it all together, HTML along with 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>