javascript - validacion - validar formulario jquery
¿Qué es jQuery discreta validación? (4)
Sé lo que es el complemento jQuery Validation. Sé que la biblioteca jQuery Unobtrusive Validation fue creada por Microsoft y está incluida en el framework ASP.NET MVC. Pero no puedo encontrar una sola fuente en línea que explique de qué se trata. ¿Cuál es la diferencia entre la biblioteca jQuery Validation estándar y la versión "discreta"?
Brad Wilson tiene un par de excelentes artículos sobre bradwilson.typepad.com/blog/2010/10/… discreta y ajax discreto .
También se muestra muy bien en este video de Pluralsight en la sección sobre "AJAX y JavaScript".
Básicamente, es simplemente la validación de Javascript que no contamina su código fuente con su propio código de validación . Esto se hace haciendo uso de atributos de data-
en HTML.
Con la manera discreta:
- No tiene que llamar al método validate ().
- Usted especifica los requisitos usando atributos de datos (data-val, data-val-required, etc.)
Jquery Validate Ejemplo :
<input type="text" name="email" class="required">
<script>
$(function () {
$("form").validate();
});
</script>
Jquery Validate Ejemplo discreto :
<input type="text" name="email" data-val="true"
data-val-required="This field is required.">
<div class="validation-summary-valid" data-valmsg-summary="true">
<ul><li style="display:none"></li></ul>
</div>
Para una aclaración, aquí hay un ejemplo más detallado que demuestra Validación de formulario usando jQuery Validación discreta.
Ambos usan el siguiente JavaScript con jQuery:
$("#commentForm").validate({
submitHandler: function(form) {
// some other code
// maybe disabling submit button
// then:
alert("This is a valid form!");
// form.submit();
}
});
Las principales diferencias entre los dos complementos son los atributos utilizados para cada enfoque.
Validación jQuery
Simplemente use los siguientes atributos:
- Se requiere un conjunto si es necesario
- Establecer el tipo de formato adecuado (correo electrónico, etc.)
- Establecer otros atributos como el tamaño (longitud mínima, etc.)
Aquí está la forma ...
<form id="commentForm">
<label for="form-name">Name (required, at least 2 characters)</label>
<input id="form-name" type="text" name="form-name" class="form-control" minlength="2" required>
<input type="submit" value="Submit">
</form>
jQuery Validación discreta
Se necesitan los siguientes atributos de datos:
- data-msg-required = "Esto es obligatorio".
- data-rule-required = "verdadero / falso"
Aquí está la forma ...
<form id="commentForm">
<label for="form-x-name">Name (required, at least 2 characters)</label>
<input id="form-x-name" type="text" name="name" minlength="2" class="form-control" data-msg-required="Name is required." data-rule-required="true">
<input type="submit" value="Submit">
</form>
En función de cualquiera de estos ejemplos, si se rellenaron los campos de formulario necesarios y cumplen los criterios de atributo adicionales, aparecerá un mensaje que notificará que todos los campos de formulario están validados. De lo contrario, habrá texto cerca de los campos del formulario ofensivo que indica el error.
Referencias: - Validación jQuery: https://jqueryvalidation.org/documentation/
jQuery Validation Unobtrusive Native es una colección de extensiones de ayuda ASP.Net MVC HTML. Estos hacen uso de la compatibilidad nativa de jQuery Validation para la validación impulsada por los atributos de datos HTML 5. Microsoft envió jquery.validate.unobtrusive.js de vuelta con MVC 3. Proporcionó una forma de aplicar las validaciones del modelo de datos al lado del cliente mediante una combinación de validación jQuery y atributos de datos HTML 5 (esa es la parte "discreta").