Resumo : neste tutorial, você aprenderá sobre a API de formulário JavaScript: acessando o formulário, obtendo valores dos elementos, validando os dados do formulário e enviando o formulário.
Noções básicas de formulário
Para criar um formulário em HTML, você usa o <form>
elemento:
<form action="/signup" method="post" id="signup">
</form>
Linguagem de código: HTML, XML ( xml )
O <form>
elemento possui dois atributos importantes: action
e method
.
- O
action
atributo especifica uma URL que processará o envio do formulário. Neste exemplo, a ação é a/signup
URL. - O
method
atributo especifica o método HTTP para enviar o formulário. Normalmente, o método épost
ouget
.
Geralmente, você usa o get
método quando deseja recuperar dados do servidor e o post
método quando deseja alterar dados no servidor.
JavaScript usa o HTMLFormElement
objeto para representar um formulário. O HTMLFormElement
possui as seguintes propriedades que correspondem aos atributos HTML:
action
– é a URL que processa os dados do formulário. É equivalente aoaction
atributo do<form>
elemento.method
– é o método HTTP que equivale aomethod
atributo do<form>
elemento.
O HTMLFormElement
elemento também fornece os seguintes métodos úteis:
submit()
– enviar o formulário.reset()
– redefinir o formulário.
Formulários de referência
Para referenciar o <form>
elemento, você pode usar métodos de seleção do DOM, como getElementById()
:
const form = document.getElementById('subscribe');
Linguagem de código: JavaScript ( javascript )
Um documento HTML pode ter vários formatos. A document.forms
propriedade retorna uma coleção de formulários ( HTMLFormControlsCollection
) no documento:
document.forms
Linguagem de código: JavaScript ( javascript )
Para referenciar um formulário, você usa um índice. Por exemplo, a instrução a seguir retorna o primeiro formato do documento HTML:
document.forms[0]
Linguagem de código: CSS ( css )
Enviando um formulário
Normalmente, um formulário possui um botão de envio. Ao clicar nele, o navegador envia os dados do formulário para o servidor. Para criar um botão de envio, você usa <input>
ou <button>
elemento com o tipo submit
:
<input type="submit" value="Subscribe">
Linguagem de código: HTML, XML ( xml )
Ou
<button type="submit">Subscribe</button>
Linguagem de código: HTML, XML ( xml )
Se o botão enviar estiver em foco e você pressionar a Enter
tecla, o navegador também envia os dados do formulário.
Quando você envia o formulário, o submit
evento é acionado antes que a solicitação seja enviada ao servidor. Isso lhe dá a chance de validar os dados do formulário. Se os dados do formulário forem inválidos, você poderá interromper o envio do formulário.
Para anexar um ouvinte de evento ao submit
evento, use o addEventListener()
método do elemento form da seguinte forma:
const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
// handle the form data
});
Linguagem de código: JavaScript ( javascript )
Para impedir que o formulário seja enviado, você chama o preventDefault()
método do event
objeto dentro do submit
manipulador de eventos assim:
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
});
Linguagem de código: PHP ( php )
Normalmente, você chama o event.preventDefault()
método se os dados do formulário forem inválidos. Para enviar o formulário em JavaScript, você chama o submit()
método do objeto form:
form.submit();
Linguagem de código: CSS ( css )
Observe que o form.submit()
não dispara o submit
evento. Portanto, você deve sempre validar o formulário antes de chamar este método.
Acessando campos do formulário
Para acessar os campos do formulário, você pode usar métodos DOM como getElementsByName()
, getElementById()
, querySelector()
, etc.
Além disso, você pode usar a elements
propriedade do form
objeto. A form.elements
propriedade armazena uma coleção de elementos do formulário.
JavaScript permite acessar um elemento por índice, id ou nome. Suponha que você tenha o seguinte formulário de inscrição com dois <input>
elementos:
<form action="signup.html" method="post" id="signup">
<h1>Sign Up</h1>
<div class="field">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your fullname" />
<small></small>
</div>
<div class="field">
<label for="email">Email:</label>
<input type="text" id="email" name="email" placeholder="Enter your email address" />
<small></small>
</div>
<button type="submit">Subscribe</button>
</form>
Linguagem de código: HTML, XML ( xml )
Para acessar os elementos do formulário, você obtém primeiro o elemento do formulário:
const form = document.getElementById('signup');
Linguagem de código: JavaScript ( javascript )
E use índice, id ou nome para acessar o elemento. O seguinte acessa o primeiro elemento do formulário:
form.elements[0]; // by index
form.elements['name']; // by name
form.elements['name']; // by id (name & id are the same in this case)
Linguagem de código: JavaScript ( javascript )
O seguinte acessa o segundo elemento de entrada:
form.elements[1]; // by index
form.elements['email']; // by name
form.elements['email']; // by id
Linguagem de código: JavaScript ( javascript )
Após acessar um campo do formulário, você pode utilizar a value
propriedade para acessar seu valor, por exemplo:
const form = document.getElementById('signup');
const name = form.elements['name'];
const email = form.elements['email'];
// getting the element's value
let fullName = name.value;
let emailAddress = email.value;
Linguagem de código: JavaScript ( javascript )
Junte tudo: formulário de inscrição
A seguir ilustra o documento HTML que possui um formulário de inscrição. Veja a demonstração ao vivo aqui .
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Form Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<form action="signup.html" method="post" id="signup">
<h1>Sign Up</h1>
<div class="field">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your fullname" />
<small></small>
</div>
<div class="field">
<label for="email">Email:</label>
<input type="text" id="email" name="email" placeholder="Enter your email address" />
<small></small>
</div>
<div class="field">
<button type="submit" class="full">Subscribe</button>
</div>
</form>
</div>
<script src="js/app.js"></script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
O documento HTML faz referência aos arquivos style.css
e app.js
. Ele usa o <small>
elemento para exibir uma mensagem de erro caso o <input>
elemento tenha dados inválidos.
Enviar o formulário sem fornecer nenhuma informação resultará no seguinte erro:
Enviar o formulário com o nome, mas com um formato de endereço de e-mail inválido, resultará no seguinte erro:
A seguir mostra o app.js
arquivo completo:
// show a message with a type of the input
function showMessage(input, message, type) {
// get the small element and set the message
const msg = input.parentNode.querySelector("small");
msg.innerText = message;
// update the class for the input
input.className = type ? "success" : "error";
return type;
}
function showError(input, message) {
return showMessage(input, message, false);
}
function showSuccess(input) {
return showMessage(input, "", true);
}
function hasValue(input, message) {
if (input.value.trim() === "") {
return showError(input, message);
}
return showSuccess(input);
}
function validateEmail(input, requiredMsg, invalidMsg) {
// check if the value is not empty
if (!hasValue(input, requiredMsg)) {
return false;
}
// validate email format
const emailRegex =
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const email = input.value.trim();
if (!emailRegex.test(email)) {
return showError(input, invalidMsg);
}
return true;
}
const form = document.querySelector("#signup");
const NAME_REQUIRED = "Please enter your name";
const EMAIL_REQUIRED = "Please enter your email";
const EMAIL_INVALID = "Please enter a correct email address format";
form.addEventListener("submit", function (event) {
// stop form submission
event.preventDefault();
// validate the form
let nameValid = hasValue(form.elements["name"], NAME_REQUIRED);
let emailValid = validateEmail(form.elements["email"], EMAIL_REQUIRED, EMAIL_INVALID);
// if valid, submit the form.
if (nameValid && emailValid) {
alert("Demo only. No form was posted.");
}
});
Linguagem de código: JavaScript ( javascript )
Como funciona.
A função showMessage()
A showMessage()
função aceita um elemento de entrada, uma mensagem e um tipo:
// show a message with a type of the input
function showMessage(input, message, type) {
// get the <small> element and set the message
const msg = input.parentNode.querySelector("small");
msg.innerText = message;
// update the class for the input
input.className = type ? "success" : "error";
return type;
}
Linguagem de código: JavaScript ( javascript )
O seguinte mostra o campo de entrada do nome no formulário:
<div class="field">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your fullname" />
<small></small>
</div>
Linguagem de código: HTML, XML ( xml )
Se o valor do nome estiver em branco, você precisa primeiro obter seu pai, que é o <div>
da classe “campo”.
input.parentNode
Linguagem de código: CSS ( css )
Em seguida, você precisa selecionar o <small>
elemento:
const msg = input.parentNode.querySelector("small");
Linguagem de código: JavaScript ( javascript )
Em seguida, atualize a mensagem:
msg.innerText = message;
Depois disso, alteramos a classe CSS do campo de entrada com base no valor do parâmetro de tipo. Se o tipo for verdadeiro, alteramos a classe da entrada para sucesso. Caso contrário, mudamos a classe para erro.
input.className = type ? "success" : "error";
Linguagem de código: JavaScript ( javascript )
Por fim, retorne o valor do tipo:
return type;
Linguagem de código: JavaScript ( javascript )
As funções showError() e showSuccess()
As funções showError()
e showSuccess()
chamam a showMessage()
função. A showError()
função sempre retorna false
, enquanto a showSuccess()
função sempre retorna true
. Além disso, a showSuccess()
função define a mensagem de erro como uma string vazia.
function showError(input, message) {
return showMessage(input, message, false);
}
function showSuccess(input) {
return showMessage(input, "", true);
}
Linguagem de código: JavaScript ( javascript )
A função hasValue()
A hasValue()
função verifica se um elemento de entrada tem um valor ou não e mostra uma mensagem de erro usando a função showError()
ou showSuccess()
adequadamente:
function hasValue(input, message) {
if (input.value.trim() === "") {
return showError(input, message);
}
return showSuccess(input);
}
Linguagem de código: JavaScript ( javascript )
A função validEmail()
A validateEmail()
função valida se um campo de email contém um endereço de email válido:
function validateEmail(input, requiredMsg, invalidMsg) {
// check if the value is not empty
if (!hasValue(input, requiredMsg)) {
return false;
}
// validate email format
const emailRegex =
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const email = input.value.trim();
if (!emailRegex.test(email)) {
return showError(input, invalidMsg);
}
return true;
}
Linguagem de código: PHP ( php )
A validateEmail()
função chama a hasValue()
função para verificar se o valor do campo está vazio. Se o campo de entrada estiver vazio, ele mostra o arquivo requiredMsg
.
Para validar o e-mail, ele utiliza uma expressão regular . Se o e-mail for inválido, a validateEmail()
função mostra o arquivo invalidMsg
.
O manipulador de eventos de envio
Primeiro, selecione o formulário de inscrição pelo seu id usando o querySelector()
método:
const form = document.querySelector("#signup");
Linguagem de código: JavaScript ( javascript )
Segundo, defina algumas constantes para armazenar as mensagens de erro:
const NAME_REQUIRED = "Please enter your name";
const EMAIL_REQUIRED = "Please enter your email";
const EMAIL_INVALID = "Please enter a correct email address format";
Linguagem de código: JavaScript ( javascript )
Terceiro, adicione o submit
ouvinte de evento do formulário de inscrição usando o addEventListener()
método:
form.addEventListener("submit", function (event) {
// stop form submission
event.preventDefault();
// validate the form
let nameValid = hasValue(form.elements["name"], NAME_REQUIRED);
let emailValid = validateEmail(form.elements["email"], EMAIL_REQUIRED, EMAIL_INVALID);
// if valid, submit the form.
if (nameValid && emailValid) {
alert("Demo only. No form was posted.");
}
});
Linguagem de código: JavaScript ( javascript )
No manipulador de eventos de envio:
- Pare o envio do formulário chamando o
event.preventDefault()
método. - Valide os campos de nome e email usando as funções
hasValue()
evalidateEmail()
. - Se o nome e o e-mail forem válidos, mostre um alerta. Em uma aplicação real, você precisa chamar o
form.submit()
método para enviar o formulário.
Resumo
- Use o
<form>
elemento para criar um formulário HTML. - Use métodos DOM como
getElementById()
equerySelector()
para selecionar um<form>
elemento. Odocument.forms[index]
também retorna o elemento do formulário por um índice numérico. - Use
form.elements
para acessar elementos do formulário. - O
submit
evento é acionado quando os usuários clicam no botão enviar no formulário.