example - Complemento jquery.validate: cómo recortar valores antes de validar el formulario
jquery validate unobtrusive (15)
Estoy usando el excelente complemento jquery.validation de Jörn Zaefferer y me preguntaba si hay una forma fácil de recortar automáticamente los elementos de formulario antes de que se validen.
El siguiente es un ejemplo reducido pero funcional de un formulario que valida una dirección de correo electrónico:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.js"
type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$("#commentForm").validate({
rules: {
email: {
required: true,
email: true
}
}
});
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<label for="cemail">E-Mail:</label><input id="cemail" name="email"
class="required email" />
<input class="submit" type="submit" value="Submit"/>
</form>
</body>
</html>
El problema es que algunos usuarios se están confundiendo porque ingresan accidentalmente algunos espacios en blanco en su dirección de correo electrónico, por ejemplo, "[email protected]". Y el formulario no se envía y tiene un mensaje de error: "Ingrese una dirección de correo electrónico válida". Los usuarios que no son expertos en tecnología no saben cómo detectar espacios en blanco y pueden simplemente abandonar el sitio en lugar de tratar de resolver lo que han hecho mal.
De todos modos, esperaba poder encadenar " jQuery.trim(value) " antes de la validación para que el espacio en blanco se elimine y el error de validación nunca ocurra.
Podría usar addMethod para construir mi propia función de validación de correo electrónico. Pero estoy seguro de que hay una solución más elegante?
¿No podrías vincular el recorte a un evento borroso? Algo como...
$("#cemail").blur(function(){ $(this).val(jQuery.trim($(this).val()); });
¿Por qué no hacer esto?
La validación está ocurriendo después del evento keyup. En keyup, reemplace el valor del cuadro de texto con su valor recortado (o use una expresión regular para eliminar cualquier espacio):
$("#user_name").on("keyup", function(){
$("#user_name").val($.trim($("#user_name").val()));
});
A partir de jQuery Validation plugin versión 1.15 , se admite una función de normalización . El normalizador puede transformar el valor de un elemento antes de la validación.
Tenga en cuenta que el resultado del normalizador solo se utiliza para la validación. Si desea actualizar el valor del elemento, debe hacerlo explícitamente.
$("#form").validate({
rules: {
email: {
required: true,
email: true,
normalizer: function(value) {
// Update the value of the element
this.value = $.trim(value);
// Use the trimmed value for validation
return this.value;
}
}
}
});
Agregue un nuevo método de validación jQuery requiredNotBlank . Luego aplique esa función a sus elementos en lugar de la función required predeterminada. Esta solución no cambia el código fuente del validador original, ni modifica la función required predeterminada, ni modifica el valor del elemento directamente.
// jQuery Validator method for required not blank.
$.validator.addMethod(''requiredNotBlank'', function(value, element) {
return $.validator.methods.required.call(this, $.trim(value), element);
}, $.validator.messages.required);
// ...
$(''#requiredNotBlankField'').rules(''add'', ''requiredNotBlank'');
Al descargar validator.js, hay un archivo llamado additional-methods.js que contiene el método "nowhitespace" y "lettersonly" que eliminará cualquier espacio en blanco de un campo.
rules: {
user_name: {
required: true,
minlength: 3,
nowhitespace: true
}
}
Como quiero este comportamiento en todos mis formularios por defecto, decidí modificar el archivo jquery.validate.js. Apliqué el siguiente cambio al método onfocusout:
Original:
onfocusout: function (element, event) {
if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
this.element(element);
}
}
A:
onfocusout: function (element, event) {
if (element.tagName === "TEXTAREA" || (element.tagName === "INPUT" && element.type !== "password")) {
element.value = $.trim(element.value);
}
if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
this.element(element);
}
}
Quiero permitir espacios al principio y al final de la contraseña.
AutoTrim se podría agregar como una propiedad a las opciones.
En la validación de jQuery encontrarás el siguiente código:
required: function( value, element, param ) {
// Check if dependency is met
if ( !this.depend( param, element ) ) {
return "dependency-mismatch";
}
if ( element.nodeName.toLowerCase() === "select" ) {
// Could be an array for select-multiple or a string, both are fine this way
var val = $( element ).val();
return val && val.length > 0;
}
if ( this.checkable( element ) ) {
return this.getLength( value, element ) > 0;
}
return value.length > 0;
}
Cambie value.length a $ .trim (value) .length
Este código funciona para mí. No lo he usado mucho por lo que puede haber errores.
Envuelve cada método y recorta el primer elemento que es valor.
(function ($) {
$.each($.validator.methods, function (key, value) {
$.validator.methods[key] = function () {
if(arguments.length > 0) {
arguments[0] = $.trim(arguments[0]);
}
return value.apply(this, arguments);
};
});
} (jQuery));
Si está utilizando select2 y la validación al mismo tiempo, recomiendo poner el.val($.trim(el.val())); dentro de un IF como este: if(el.prop(''type'') != ''select-multiple''){el.val($.trim(el.val()));} . De esa manera, la validación de jquery se comportará como se esperaba y le permitirá seleccionar varios elementos.
Esto es lo que funciona para mí:
$('':input'').change(function() {
$(this).val($(this).val().trim());
});
He encontrado que la mayoría de estos no son exactamente lo que se necesita.
El uso de lo siguiente solo se activa con el cambio de formulario en lugar de con la tecla pulsada hacia abajo, lo que le permite seguir revisando el golpe de tecla durante el resto de la validación.
No es tan ordenado como incluirlo dentro del complemento, pero es un compromiso aceptable.
$(''body'').on ''change'', ''form input[type=text], form input[type=email]'', ->
$(@).val $.trim($(@).val())
Hice esto con éxito.
En lugar de:
Email: { required: true, email: true }
Hice esto:
Email: {
required: {
depends:function(){
$(this).val($.trim($(this).val()));
return true;
}
},
email: true
}
Me gusta el enfoque de xuser ( https://.com/a/10406573/80002 ), sin embargo, no me gusta jugar con el código fuente del complemento.
Por lo tanto, sugiero hacer esto en su lugar:
function injectTrim(handler) {
return function (element, event) {
if (element.tagName === "TEXTAREA" || (element.tagName === "INPUT"
&& element.type !== "password")) {
element.value = $.trim(element.value);
}
return handler.call(this, element, event);
};
}
$("form").validate({
onfocusout: injectTrim($.validator.defaults.onfocusout)
});
Para referencia, hasta que encuentre una solución más elegante, estoy usando addMethod siguiente manera:
// Extend email validation method so that it ignores whitespace
jQuery.validator.addMethod("emailButAllowTrailingWhitespace", function(value, element) {
return (this.optional(element) || jQuery.validator.methods.email.call(this, jQuery.trim(value), element));
}, "Please enter a valid email");
$().ready(function() {
$("#commentForm").validate({
rules: {
cemail: {
required: true,
emailButAllowTrailingWhitespace: true
}
}
});
});
Nota: esto no elimina realmente el espacio en blanco del campo, solo lo ignora. Por lo tanto, debe asegurarse de realizar un trim en el lado del servidor antes de insertarlo en la base de datos.
Puede ejecutar el código antes de que el formulario se verifique así:
var origCheckForm = $.validator.prototype.checkForm;
$.validator.prototype.checkForm = function() {
$(this.currentForm).find(''.CodeMirror'').each(function() {
if(this.CodeMirror && this.CodeMirror.save) {
this.CodeMirror.save();
}
});
return origCheckForm.apply(this, arguments);
};
Lo he usado para guardar todas mis instancias de CodeMirror en sus áreas de texto correspondientes. Podrías usarlo para recortar valores si lo deseas.
Se extrajo la expresión regular del validador jquery. Simplemente anular su validación de correo electrónico.
$.validator.addMethod("email", function(value, element) {
value = value.trim();
return this.optional(element) || /^((([a-z]|/d|[!#/$%&''/*/+/-//=/?/^_`{/|}~]|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])+(/.([a-z]|/d|[!#/$%&''/*/+/-//=/?/^_`{/|}~]|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])+)*)|((/x22)((((/x20|/x09)*(/x0d/x0a))?(/x20|/x09)+)?(([/x01-/x08/x0b/x0c/x0e-/x1f/x7f]|/x21|[/x23-/x5b]|[/x5d-/x7e]|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])|(//([/x01-/x09/x0b/x0c/x0d-/x7f]|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF]))))*(((/x20|/x09)*(/x0d/x0a))?(/x20|/x09)+)?(/x22)))@((([a-z]|/d|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])|(([a-z]|/d|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])([a-z]|/d|-|/.|_|~|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])*([a-z]|/d|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])))/.)+(([a-z]|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])|(([a-z]|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])([a-z]|/d|-|/.|_|~|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])*([a-z]|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])))$/i.test(value);
}, "Please enter a valid email.");