Estou precisando de uma ajuda para validar um formulário utilizando apenas o JavaScript puro.
Não consigo fazer com que se, por exemplo, o usuário digitar números no campo de nome de usuário, apareça uma mensagem dando erro. O mesmo deve acontecer se o usuário por exemplo colocar um email inválido, tipo "aaaaaaaa".
Eu tentei fazer isso no nome de usuário, como mostra no código abaixo. Se ele deixa o campo em branco ou ultrapassa os 16 caracteres o erro funciona normalmente. Se ele preenche a mensagem some, mas se ele colocar números e outras coisas a mensagem que era para aparecer não aparece.
JavaScript:
function validar(){
var usuario = document.getElementById("usuario").value;
var email = document.getElementById("email").value;
var senha = document.getElementById("senha").value;
var confirmarsenha = document.getElementById("confirmar-senha").value;
var usuario_correto = /^[A-Za-z]+$/;
var valido = true;
if(usuario.length < 2 || usuario.length > 16) {
document.getElementById("msg-usuario").innerHTML="* O nome de usúario precisa ter entre 2 a 16 caracteres";
valido = false;
}else if (usuario.match(usuario_correto)) {
document.getElementById("msg-usuario").innerHTML="* O nome de usúario só pode ter letras [A-Z/a-z]";
valido = false;
}else{
document.getElementById("msg-usuario").innerHTML="";
}
if(email=="") {
document.getElementById("msg-email").innerHTML="* O email é obrigatório";
valido = false;
}else{
document.getElementById("msg-email").innerHTML="";
}
if(senha.length < 5 || senha.length > 16) {
document.getElementById("msg-senha").innerHTML="* A senha precisa conter de 5 a 16 caracteres";
valido = false;
}else{
document.getElementById("msg-senha").innerHTML="";
}
if(confirmarsenha=="") {
document.getElementById("msg-confirmar-senha").innerHTML="* Confirme a senha";
valido = false;
}else{
document.getElementById("msg-confirmar-senha").innerHTML="";
}
return valido;
}
Formulário:
<form class="form-registrar" onsubmit="return validar()">
<input type="text" placeholder="Nome de usúario" class="form-campo" id="usuario">
<div class="form-msg-erro" id="msg-usuario"></div>
<br>
<input type="text" placeholder="Email" class="form-campo" id="email">
<div class="form-msg-erro" id="msg-email"></div>
<br>
<input type="text" placeholder="Senha" class="form-campo" id="senha">
<div class="form-msg-erro" id="msg-senha"></div>
<br>
<input type="text" placeholder="Confirmar senha" class="form-campo" id="confirmar-senha">
<div class="form-msg-erro" id="msg-confirmar-senha"></div>
<br>
<input type="submit" value="Registrar" class="form-campo-registrar">
</form>
if (! usuario.match(/^[A-Za-z]{2,16}$/)) { usuario inválido }
(já verifica se tem entre 2 e 16 letras, e entra no if se não for válido)