Introducción a los formularios en JavaScript

JavaScript es un lenguaje de programación utilizado comúnmente en aplicaciones web para calcular, manipular y validar datos, crear páginas dinámicas e interactuar con el usuario. Dado que JavaScript tiene muchos casos de uso, en este artículo aprenderemos sobre formularios y validación de formularios a través de JavaScript.

Con la ayuda de JavaScript, podemos mejorar, validar el formulario HTML y sus elementos en el lado del cliente sin siquiera invocar el servidor. JavaScript puede garantizar que el usuario cumpla con todos los requisitos antes de enviar el formulario al programa de aplicación.

Como podemos validar el formulario en el lado del cliente, el procesamiento de datos se vuelve más rápido en comparación con la validación del lado del servidor. La mayoría de los desarrolladores web hacen uso de la validación de formularios JavaScript.

Formulario y Validación de Formulario en JavaScript

Los formularios son una sección importante de cualquier aplicación web para recopilar información del usuario, comentarios o consultas. A través de JavaScript, podemos proporcionar una mejor experiencia de usuario al mostrarle resultados de manera eficiente.

Los elementos que se usan más comúnmente en los formularios para recopilar datos son:

  • Cuadro de texto: para ingresar un texto
  • Pulsador: para realizar una acción
  • Botones de radio: para seleccionar una opción entre un grupo de opciones
  • Casillas de verificación: para seleccionar o anular la selección de una única opción independiente

Al implementar formularios, debemos proporcionar un nombre a nuestro formulario y los elementos que hemos usado en nuestro formulario porque los nombres que hemos asignado nos ayudan a referir esos objetos (formulario y su elemento) en nuestro JavaScript.

Una forma típica se parece a la que se muestra a continuación,

Código:



Nota: proporcioné NAME = atributos para todos los elementos del formulario, incluido el formulario en sí.

El formulario de JavaScript utiliza controladores de eventos, como onClick o onSubmit para invocar una acción de JavaScript cuando el usuario realiza una acción en el formulario, como hacer clic en un botón.

Ejemplo para recopilar y validar información de usuario en JavaScript

La implementación del código para recopilar y validar la información del usuario se proporciona a continuación.

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;
)

Salida # 1: Entrada correcta del usuario

Salida # 2: Credenciales de usuario incorrectas / faltantes

  • index.html: crea el formulario.
  • validate.js: valida el formulario.
  • form-style.css: diseña el diseño del formulario.

Los datos ingresados ​​en el formulario deben estar en el formato correcto según lo requerido por la aplicación y ciertos campos deben completarse obligatoriamente para enviar el formulario.

Conclusión

En este artículo, hemos aprendido sobre el formulario y los diversos elementos o controles utilizados en los formularios y qué papel juega JavaScript en la validación del formulario, la verificación de los datos ingresados ​​por el usuario, las funciones de manejo de eventos cuando se realiza una acción como hacer clic en un botón y sus beneficios

Artículos recomendados

Esta es una guía de formularios en JavaScript. Aquí discutimos cómo recopilar y validar la información del usuario con ejemplos apropiados. También puede consultar los siguientes artículos para obtener más información.

  1. Encapsulación en JavaScript (trabajo, ventajas)
  2. Pasos para crear objetos en JavaScript
  3. Lógica para encontrar el reverso en JavaScript con ejemplos
  4. Los 6 mejores compiladores en JavaScript
  5. Guía completa de casilla de verificación en Bootstrap
  6. Tipos de formularios en reacción con ejemplos
  7. Guía para la validación de formularios HTML con ejemplos

Categoría:

Desarrollo de software