La validación del formulario HTML se puede realizar mediante JavaScript.
Si un campo de formulario (fname) está vacío, esta función alerta un mensaje y devuelve false, para evitar que se envíe el formulario:
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}La función se puede llamar cuando se envía el formulario:
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
JavaScript se utiliza a menudo para validar la entrada numérica:
Por favor ingrese un número entre 1 y 10
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
// Get the value of the input field with id="numb"
let x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
La validación del formulario HTML la puede realizar automáticamente el navegador:
Si un campo de formulario (fname) está vacío, el atributo required impide que este formulario se muestre. enviado:
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>
</body>
</html>
La validación automática de formularios HTML no funciona en Internet Explorer 9 o versiones anteriores.
La validación de datos es el proceso de garantizar que la entrada del usuario sea limpia, correcto y útil.
Las tareas de validación típicas son:
¿El usuario ha completado todos los campos obligatorios?
¿Ha introducido el usuario una fecha válida?
¿El usuario ha ingresado texto en un campo numérico?
En la mayoría de los casos, el propósito de la validación de datos es garantizar la entrada correcta del usuario.
La validación puede definirse mediante muchos métodos diferentes e implementarse en muchos diferentes caminos.
La validación del lado del servidor la realiza un servidor web, después de que la entrada se haya enviado al servidor.
La validación del lado del cliente la realiza un navegador web, antes de enviar la entrada a un servidor web.
HTML5 introdujo un nuevo concepto de validación HTML llamado restricción validación.
La validación de restricciones HTML se basa en:
Validación de restricciones HTML Atributos de entrada
Validación de restricciones Pseudo selectores CSS
Validación de restricciones Propiedades y métodos DOM
Especifica que el elemento de entrada debe estar deshabilitado.
Especifica el valor máximo de un elemento de entrada.
Especifica el valor mínimo de un elemento de entrada.
Especifica el patrón de valor de un elemento de entrada.
Especifica que el campo de entrada requiere un elemento
Especifica el tipo de un elemento de entrada.
Para obtener una lista completa, vaya a HTML Atributos de entrada.
Selecciona elementos de entrada con el atributo "deshabilitado" especificado
Selecciona elementos de entrada con valores no válidos
Selecciona elementos de entrada sin ningún atributo "requerido" especificado
Selecciona elementos de entrada con el atributo "requerido" especificado
Selecciona elementos de entrada con valores válidos.
Para obtener una lista completa, vaya a CSS Pseudoclases.