El JavaScript ES6 trae la validación de las entradas del usuario. La validación es un proceso de verificar si la información proporcionada por el usuario front-end es correcta de acuerdo con los requisitos o no, generalmente, el proceso de verificación se realiza en el lado del servidor y envía la información de validación al usuario front-end, que no solo fue una pérdida de tiempo de ejecución sino también de tiempo de los usuarios. JavaScript proporciona una forma de validar los datos del formulario en el front-end antes de enviarlo al lado del servidor. La validación de formularios generalmente realiza dos tipos de validaciones.
- Validación básica: Es un proceso de verificar si todos los datos de campo requeridos están completos o no.
- Validación del formato de datos: es un proceso de verificación de la exactitud de los datos proporcionados, por ejemplo, si el código PIN dado contiene 6 dígitos o no o si Gmail contiene @ o no.
Sintaxis:
<script>
function function(){
//validation code
}
</script>
<form action="redirect page" name="name of form" onsubmit="return function()">
<!--form-->
</form>
Parámetros: Hay tres parámetros requeridos cuando diseñas un formulario para obtener información del usuario.
- action=”redirect page”: Redirige a la página siguiente cuando la información proporcionada es precisa.
- onsubmit=”return function()”: llama a la función de validación, cuando se hace clic en el botón de envío, “return function()” cuando la función() devuelve verdadero, redirige la ejecución a la acción, si es falso, redirige la ejecución nuevamente a enviar en un bucle.
- name=”nombre del formulario”: Con la ayuda de nombre accedemos a los valores del formulario.
Ejemplo:
Javascript
<!DOCTYPE html>
<html>
<head>
<title>Basic Validation</title>
<script>
function validateBasic() {
var x = document.Basic.name.value;
if (x == "") {
document.getElementById("d1").innerHTML =
"Name must be filled out.";
return false;
//(optional)by default functions return is true
return true;
}
}
</script>
</head>
<body>
<center>
<h1 style="color:green;">Geeksforgeeks</h1>
<h4>ES6 validation</h4>
<!-- action store in local storage -->
<form name="Basic" action="#"
onsubmit="return validateBasic()">
Name:
<input type="text" name="name">
<input type="submit" value="Submit">
</form>
<p id="d1"></p>
</center>
</body>
</html>
Producción:
- Enviar sin completar imprimirá un mensaje para completar:
- Enviar con relleno las impresiones enviadas:
Validación del formato de datos : Es un proceso de verificar si todos los campos obligatorios están llenos, de acuerdo con los requisitos, no lo están.
Ejemplo:
Javascript
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validateData() {
//Basic check whether the username is filled or not.
if (document.Form.name.value == "") {
alert("Provide your name!");
document.Form.name.focus();
return false;
}
//checks whether the username is less than or
//equal to 8 characters or not
if (document.Form.name.value.length > 8) {
alert("Username should be utmost 8 characters!");
document.Form.name.focus();
return false;
}
//Checks whether the dropdown is selected or not.
if (document.Form.Galaxy.value == "-1") {
alert("Provide your Galaxy!");
return false;
}
//Checks whether the dropdown is selected or not.
if (document.Form.Guardian.value == "-1") {
alert("Provide your Favorite Guardian!");
return false;
}
}
</script>
</head>
<body>
<center>
<h1 style="color:green">Favorite Guardian Voting</h1>
<form action="#" name="Form"
onsubmit="return validateData()">
<table cellspacing="0" cellpadding="3" border="1">
<tr>
<td align="center">Username</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td align="center">From Galaxy</td>
<td>
<select name="Galaxy">
<option value="-1" selected>choose yours</option>
<option value="1">Milky Way</option>
<option value="2">Andromeda</option>
<option value="3">Whirlpool</option>
</select>
</td>
</tr>
<tr>
<td align="center">Favorite Guardian</td>
<td>
<select name="Guardian">
<option value="-1" selected>choose yours</option>
<option value="1">Quill</option>
<option value="2">Groot</option>
<option value="3">Rocket</option>
<option value="4">Drax</option>
<option value="5">Gamora</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
Producción:
- El nombre de usuario y el guardián favorito no se completaron, ya que el nombre de usuario se activa primero de acuerdo con el script de validación, la alerta de nombre de usuario se alerta primero:
- Como el nombre de usuario y el tutor se completaron, pero la validación del formato de datos es incorrecta para el nombre de usuario, ya que el nombre de usuario debe tener menos o igual a 8 caracteres.
- Verifique y complete el nombre de usuario a menos de 8 caracteres. Como todos son válidos, se envía.
HTML en enviar.html:
Javascript
<!DOCTYPE html> <html> <body> <h2 style="color:red">Submitted.</h2> </body> </html>
action=”C:\Users\Teju\Desktop\submit.html” : Es una ruta de la página HTML local en el sistema local, cuando todos los campos obligatorios se completan de acuerdo con el requisito, la acción redirige a la página dada o server y toma la ejecución desde allí. La ruta se convirtió en una acción con respecto al lado del servidor o cualquier cosa que queramos reenviar a continuación con los detalles del formulario.