Formularios JavaScript
Validación de formulario JavaScript
La validación de formularios HTML se puede realizar mediante JavaScript.
Si un campo de formulario (fname) está vacío, esta función alerta con un mensaje y devuelve falso para evitar que se envíe el formulario:
Ejemplo de JavaScript
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:
Ejemplo de formulario HTML
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
JavaScript puede validar la entrada numérica
JavaScript se usa a menudo para validar la entrada numérica:
Por favor ingrese un número entre 1 y 10
Validación automática de formularios HTML
El navegador puede realizar automáticamente la validación del formulario HTML:
Si un campo de formulario (fname) está vacío, el requiredatributo impide que se envíe este formulario:
Ejemplo de formulario HTML
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
La validación automática de formularios HTML no funciona en Internet Explorer 9 o anterior.
Validación de datos
La validación de datos es el proceso de garantizar que la entrada del usuario sea limpia, correcta y útil.
Las tareas típicas de validación son:
- ¿Ha rellenado el usuario todos los campos obligatorios?
- ¿El usuario ha ingresado una fecha válida?
- ¿Ha ingresado el usuario texto en un campo numérico?
Muy a menudo, el propósito de la validación de datos es garantizar la entrada correcta del usuario.
La validación se puede definir mediante muchos métodos diferentes y se puede implementar de muchas maneras diferentes.
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.
Validación de restricciones HTML
HTML5 introdujo un nuevo concepto de validación de HTML llamado validación de restricciones .
La validación de restricciones HTML se basa en:
- Atributos de entrada HTML de validación de restricciones
- Validación de restricciones CSS Pseudoselectores
- Validación de restricciones Propiedades y métodos del DOM
Atributos de entrada HTML de validación de restricciones
| Attribute | Description |
|---|---|
| disabled | Specifies that the input element should be disabled |
| max | Specifies the maximum value of an input element |
| min | Specifies the minimum value of an input element |
| pattern | Specifies the value pattern of an input element |
| required | Specifies that the input field requires an element |
| type | Specifies the type of an input element |
Para obtener una lista completa, vaya a Atributos de entrada HTML .
Validación de restricciones CSS Pseudoselectores
| Selector | Description |
|---|---|
| :disabled | Selects input elements with the "disabled" attribute specified |
| :invalid | Selects input elements with invalid values |
| :optional | Selects input elements with no "required" attribute specified |
| :required | Selects input elements with the "required" attribute specified |
| :valid | Selects input elements with valid values |
Para obtener una lista completa, vaya a CSS Pseudo Classes .