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: actione method.
- O
actionatributo especifica uma URL que processará o envio do formulário. Neste exemplo, a ação é a/signupURL. - O
methodatributo especifica o método HTTP para enviar o formulário. Normalmente, o método épostouget.
Geralmente, você usa o getmétodo quando deseja recuperar dados do servidor e o postmétodo quando deseja alterar dados no servidor.
JavaScript usa o HTMLFormElementobjeto para representar um formulário. O HTMLFormElementpossui as seguintes propriedades que correspondem aos atributos HTML:
action– é a URL que processa os dados do formulário. É equivalente aoactionatributo do<form>elemento.method– é o método HTTP que equivale aomethodatributo do<form>elemento.
O HTMLFormElementelemento 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.formspropriedade retorna uma coleção de formulários ( HTMLFormControlsCollection) no documento:
document.formsLinguagem 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 Entertecla, o navegador também envia os dados do formulário.
Quando você envia o formulário, o submitevento é 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 submitevento, 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 eventobjeto dentro do submitmanipulador 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 submitevento. 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 elementspropriedade do formobjeto. A form.elementspropriedade 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 idLinguagem de código: JavaScript ( javascript )Após acessar um campo do formulário, você pode utilizar a valuepropriedade 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.csse 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.jsarquivo 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.parentNodeLinguagem 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 submitouvinte 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.elementspara acessar elementos do formulário. - O
submitevento é acionado quando os usuários clicam no botão enviar no formulário.
