A validação de formulário é uma validação que ocorre no navegador antes dos dados serem enviados ao servidor.
você insere dados e o aplicativo verifica se os dados estão corretos. Se as informações estiverem corretas, o aplicativo permite que os dados sejam enviados ao servidor.
A validação do formulário pode ser implementada de várias maneiras diferentes e é subdividida nas seguintes categorias:
#Validação HTML
O recurso mais simples de validação HTML5 é o atributo required
. Para tornar uma entrada obrigatória, marque o elemento com este atributo. Quando esse atributo é definido, o formulário não será enviado e exibirá uma mensagem de erro quando a entrada estiver vazia. A entrada também será considerada inválida.
Outro recurso de validação muito comum é o atributo pattern
, que espera uma Expressão Regular como seu valor. Uma expressão regular (regex) é um padrão que pode ser usado para combinar combinações de caracteres em cadeias de texto, portanto, as regexs são ideais para validação de formulário e servem a uma variedade de outros usos em JavaScript.
#Validação em JavaScript
Você deve usar JavaScript se quiser controlar a aparência das mensagens de erro nativas ou lidar com navegadores que não suportam a validação de formulário interna do HTML.
Aplica-se aos seguintes elementos:
###Propriedades da API de validação
validationMessage
: Uma mensagem localizada descrevendo as restrições de validação que o controle não atende (se houver) ou uma string vazia se o controle não for candidato à validação (willValidate é falso).
validity
: Um objeto ValidityState que descreve o estado de validade do elemento.
willValidate
: Retorna true se o elemento for validado quando o formulário for enviado ou false caso contrário.
###Métodos da API de validação
checkValidity()
Retorna true
se o valor do elemento não tiver problemas de validação, false
caso contrário.
HTMLFormElement.reportValidity()
Retornará true
se o elemento ou seus controles filho satisfizerem as restrições de validação. Quando false é retornado
, os eventos de validação são disparados para cada elemento inválido e os problemas de validação são relatados ao usuário.
setCustomValidity()
Adiciona uma mensagem de erro personalizada ao elemento.
Para forçar o preenchimento dos elementos do seu formulário eu apliquei o atributo required
.
Para forçar o usuário entrar com um email válido apliquei o atributo pattern
com a expressão regular [a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$
;
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;
}
<form class="form-registrar" onsubmit="return validar()">
<input type="text" placeholder="Nome de usúario" class="form-campo" required id="usuario">
<div class="form-msg-erro" id="msg-usuario"></div>
<br>
<input type="email" placeholder="Email" class="form-campo" id="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" >
<div class="form-msg-erro" id="msg-email"></div>
<br>
<input type="password" placeholder="Senha" class="form-campo" id="senha">
<div class="form-msg-erro" id="msg-senha"></div>
<br>
<input type="password" 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>