La creación de formularios web siempre ha sido una tarea complicada. mientras que marcar la forma en sí es simple, verificar si cada campo presenta o no un precio válido y coherente es más difícil, e informar al usuario sobre el asunto puede convertirse en un dolor de cabeza. HTML5 introdujo nuevos mecanismos para formularios. Hay 2 tipos de métodos DOM de validación de restricciones que son checkValidity() y setCustomValidity(). Conozcamos más sobre ellos.
método checkValidity()
Primero usamos el método checkValidity() para verificar si los campos de entrada contienen datos válidos y ejecutamos checkValidity() en el envío del formulario para validar todos los campos del formulario. Si un mínimo de uno no es válido, la validación falla. Al utilizar el método checkValidity(), validamos cada uno de los elementos de entrada en el evento de desenfoque o cada uno de los elementos seleccionados en el evento de cambio. Esto le permite al usuario saber si un campo seleccionado es válido o no en un momento dado, y hace que sea posible transmitir los comentarios del usuario con prontitud.
Sintaxis:
input="this.checkValidity()"
Esto devolverá verdadero si un elemento de entrada contiene datos válidos.
Ejemplo: este ejemplo muestra cómo hacer un atributo obligatorio de formulario HTML junto con la configuración de un mensaje de validación personalizado.
<!DOCTYPE html>
<html>
<head>
<title>Form required Attribute | With message validation</title>
</head>
<body>
<body style="text-align:center;">
<h1 style="color:green">GeeksforGeeks</h1>
<p>Enter a number and click the button:</p>
<input id="gfg" type="number" min="101" max="999" required>
<button onclick="myFunction()">Try it</button>
<p>An message will display of ERROR, if the number
is lesser than 101 or greater than 999</p>
<p id="geeks"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("gfg");
if (!inpObj.checkValidity()) {
document.getElementById("geeks")
.innerHTML = inpObj.validationMessage;
} else {
document.getElementById("geeks")
.innerHTML = "Input is ALL RIGHT";
}
}
</script>
</body>
</html>
- Producción:
- Cuando cargamos el código:
- Cuando dejamos el campo en blanco y hacemos clic en el botón:
- Cuando ingresa un valor no válido:
- Cuando ingresa un valor válido:
establecerValidezPersonalizada()
En un elemento de entrada, se usa para establecer la propiedad validationMessage. Es realmente muy fácil controlar un mensaje de validación personalizado en un formulario HTML5. Averigüemos cómo.
Sintaxis:
input="this.setCustomValidity()"
Esta parte es de suma importancia, ya que ocultará el mensaje de error cuando el usuario ingrese los nuevos datos.
Ejemplo: este ejemplo muestra cómo hacer un atributo obligatorio de formulario HTML junto con la configuración de un mensaje de validación personalizado.
<!DOCTYPE html>
<html>
<head>
<title>Form required Attribute | With custom message validation
</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<form id="myform">
<p>Enter an Email Id:</p>
<input id="email" oninvalid="InvalidMsg(this);"
oninput="InvalidMsg(this);" name="email"
type="email" required="required" />
<input type="submit" />
</form>
</center>
<script>
function InvalidMsg(textbox) {
if (textbox.value === '') {
textbox.setCustomValidity
('Entering an email-id is necessary!');
} else if (textbox.validity.typeMismatch) {
textbox.setCustomValidity
('Please enter an email address which is valid!');
} else {
textbox.setCustomValidity('');
}
return true;
}
</script>
</body>
</html>
- Producción:
- Cuando cargamos el código:
- Cuando dejamos el campo en blanco y hacemos clic en el botón:
- Cuando ingresa una ID de correo electrónico no válida:
- Tres tipos de propiedades DOM de validación de restricciones:
- ValidationMessage: cuando la validez es falsa, contiene el mensaje que mostrará un navegador.
- willValidate: Indicará cuando se validará el elemento de entrada.
- Validez: relacionado con la validez de un elemento de entrada, contendrá propiedades booleanas.
En cuanto a la validez de los datos, también existen nueve tipos de Propiedades de Validez:
| Propiedad | Descripción |
|---|---|
| error personalizado | Si se establece un mensaje de validez personalizado y se establece en verdadero. |
| patrón no coincide | Si el valor de un elemento no coincide con su atributo de patrón y se establece en verdadero. |
| desbordamiento de rango | Si el valor de un elemento es mayor que su atributo máximo y se establece en verdadero. |
| rangoUnderflow | Si el valor de un elemento es menor que su atributo mínimo y se establece en verdadero. |
| pasoDesajuste | Si el valor de un elemento no es válido según su atributo de paso y se establece en verdadero. |
| demasiado largo | Si el valor de un elemento excede su atributo maxLength y se establece en verdadero. |
| tipo no coincide | Si el valor de un elemento no es válido según su atributo de tipo y se establece en verdadero. |
| válido | Si el valor de un elemento es válido y se establece en verdadero. |
| valor faltante | Si un elemento (con un atributo requerido) no tiene valor y se establece en verdadero. |
Publicación traducida automáticamente
Artículo escrito por SohomPramanick y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA