Introdução aos formulários em JavaScript

JavaScript é uma linguagem de programação usada comumente em aplicativos da web para calcular, manipular e validar dados, criar páginas dinâmicas e interagir com o usuário. Como o JavaScript tem muitos casos de uso, neste artigo, aprenderemos sobre formulários e validação de formulários por meio de JavaScript.

Com a ajuda do JavaScript, podemos aprimorar, validar o formulário HTML e seus elementos no lado do cliente sem sequer chamar o servidor. O JavaScript pode garantir que todos os requisitos sejam atendidos pelo usuário antes de enviar o formulário ao programa de aplicativo.

Como podemos validar o formulário no lado do cliente, o processamento de dados se torna mais rápido quando comparado com a validação no lado do servidor. A maioria dos desenvolvedores da Web utiliza validação de formulário JavaScript.

Formulário e validação de formulário em JavaScript

Os formulários são uma seção importante de qualquer aplicativo da Web para coletar informações, comentários ou consultas do usuário. Através do JavaScript, podemos fornecer uma melhor experiência ao usuário, exibindo resultados para o usuário de maneira eficiente.

Os elementos mais usados ​​nos formulários para coletar dados são:

  • Caixa de texto: para inserir um texto
  • Botão: Para executar uma ação
  • Botões de opção: para selecionar uma opção entre um grupo de opções
  • Caixas de seleção: para selecionar ou desmarcar uma única opção independente

Ao implementar formulários, precisamos fornecer um nome ao nosso formulário e os elementos que usamos em nosso formulário, porque os nomes que atribuímos nos ajudam a referenciar esse objeto (formulário e seu elemento) em nosso JavaScript.

Um formulário típico se parece com o mostrado abaixo,

Código:



Nota: eu forneci NAME = atributos para todos os elementos do formulário, incluindo o próprio formulário.

O formulário JavaScript utiliza manipuladores de eventos, como onClick ou onSubmit, para invocar uma ação JavaScript quando o usuário executa uma ação no formulário, como clicar em um botão.

Exemplo para coletar e validar informações do usuário em JavaScript

A implementação do código para coletar e validar informações do usuário é fornecida abaixo.

1. index.html

Código:



JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music



JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music






JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music




2. vaidate.js

Código:

// Defining a function to display errtext message
function printerrtext(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
// Defining a function to validate form
function validateForm() (
// Retrieving the values of form elements
var name = document.demoForm.name.value;
var email = document.demoForm.email.value;
var mobile = document.demoForm.mobile.value;
var country = document.demoForm.country.value;
var gender = document.demoForm.gender.value;
var pswd = document.demoForm.pswd.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
// Populate hobbies array with selected values
hobbies.push(checkboxes(i).value);
)
)
// Defining errtext variables with a default value
var nameErr = emailErr = mobileErr = countryErr = genderErr = pswdErr = true;
// Validate name
if(name == "") (
printerrtext("nameErr", "Please enter your name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printerrtext("nameErr", "Please enter a valid name");
) else (
printerrtext("nameErr", "");
nameErr = false;
)
)
// Validate email address
if(email == "") (
printerrtext("emailErr", "Please enter your email address");
) else (
// Regular expression for basic email validation
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printerrtext("emailErr", "Please enter a valid email address");
) else(
printerrtext("emailErr", "");
emailErr = false;
)
)
// Validate mobile number
if(mobile == "") (
printerrtext("mobileErr", "Please enter your mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printerrtext("mobileErr", "Please enter a valid 10 digit mobile number");
) else(
printerrtext("mobileErr", "");
mobileErr = false;
)
)
// Validate Password
if(pswd == "")(
printerrtext("pswdErr", "Please enter your password");
) else(
var regex = /^(?=.*(0-9))(?=.*( (email protected) #$%^&*))( (email protected) #$%^&*)(6, 16)$/;
if(regex.test(pswd) === false) (
printerrtext("pswdErr", "Min : 6 chacracter in form Asd4$l");
) else(
printerrtext("pswdErr", "");
pswdErr = false;
)
)
// Validate country
if(country == "Select") (
printerrtext("countryErr", "Please select your country");
) else (
printerrtext("countryErr", "");
countryErr = false;
)
// Validate gender
if(gender == "") (
printerrtext("genderErr", "Please select your gender");
) else (
printerrtext("genderErr", "");
genderErr = false;
)
// Prevent the form from being submitted if there are any errtexts
if((nameErr || emailErr || mobileErr || countryErr || genderErr || pswdErr) == true) (
return false;
) else (
// Creating a string from input data for preview
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) (
dataPreview += "Hobbies: " + hobbies.join(", ");
)
// Display input data in a dialog box before submitting the form
alert(dataPreview);
)
);

3. form-style.css

Código:

body (
font-size: 16px;
background: #f9f9f9;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
)
h2 (
text-align: center;
text-decoration: underline;
)
form (
width: 300px;
background: #fff;
padding: 15px 40px 40px;
border: 1px solid #ccc;
margin: 50px auto 0;
border-radius: 5px;
)
label (
display: block;
margin-bottom: 5px
)
label i (
color: #999;
font-size: 80%;
)
input, select (
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
)
.row (
padding-bottom: 10px;
)
.form-inline (
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
)
.form-inline label, .form-inline input (
display: inline-block;
width: auto;
padding-right: 15px;
)
.errtext (
color: red;
font-size: 90%;
)
input(type="submit") (
font-size: 110%;
font-weight: 100;
background: #006dcc;
border-color: #016BC1;
box-shadow: 0 3px 0 #0165b6;
color: #fff;
margin-top: 10px;
cursor: pointer;
)
input(type="submit"):hover (
background: #0165b6;
)

Saída 1: Entrada correta do usuário

Saída 2: credenciais de usuário incorretas / ausentes

  • index.html: cria o formulário.
  • validate.js: valida o formulário.
  • form-style.css: projeta o layout do formulário.

Os dados inseridos no formulário precisam estar no formato correto, conforme exigido pelo aplicativo, e certos campos precisam ser obrigatoriamente preenchidos para enviar o formulário.

Conclusão

Neste artigo, aprendemos sobre o formulário e os vários elementos ou controles usados ​​nos formulários e qual o papel do JavaScript na validação do formulário, verificação dos dados inseridos pelo usuário, funções de manipulação de eventos quando uma ação é executada, como clicar em um botão e seus benefícios.

Artigos recomendados

Este é um guia para formulários em JavaScript. Aqui discutimos como coletar e validar informações do usuário com exemplos apropriados. Você também pode consultar os seguintes artigos para saber mais:

  1. Encapsulamento em JavaScript (Trabalho, Vantagens)
  2. Etapas para criar objetos em JavaScript
  3. Lógica para encontrar reverso no JavaScript com exemplos
  4. Os 6 principais compiladores em JavaScript
  5. Guia completo para a caixa de seleção no Bootstrap
  6. Tipos de formulários em reagir com exemplos
  7. Guia para validação de formulário HTML com exemplos

Categoria:

Desenvolvimento de software