jquery globalization - description - No se puede hacer funcionar la globalización jQuery
meta html (3)
Intento usar el complemento jQuery Globalization para solucionar el problema de la coma con la validación de clientes no obstructiva de jQuery. Sin embargo, probé muchas soluciones y no hay una buena solución para solucionar este problema. Estoy en una computadora de localización no inglesa y esto es importante para que mis clientes ingresen un valor decimal como "123,66" y no "123.66". La validación de ASP.NET me dice que el precio debe ser un número! meh En serio ? jajaja
Recibo este error de javascript cuando trato de hacer la corrección.
$.global is undefined
Aquí mi código.
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.form.js")"type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/glob.fix.js")" type="text/javascript"></script>
</head>
<body>
@RenderBody()
</body>
</html>
glob.fix.js
$.validator.methods.range = function (value, element, param) {
var globalizedValue = value.replace(",", ".");
return this.optional(element) || (globalizedValue >= param[0] && globalizedValue <= param[1]);
}
$.validator.methods.number = function (value, element) {
return this.optional(element) || /^-?(?:/d+|/d{1,3}(?:[/s/.,]/d{3})+)(?:[/.,]/d+)?$/.test(value);
}
No puedo entender ... debería funcionar desde que agregué ~/Scripts/globalize.js .
¿Alguna idea? ¿O podría tener una mejor solución para que funcione la validación de clientes y me permita ingresar una coma como valores decimales?
¡Encontré la manera de finalmente deshacerme del problema decimal con el separador de coma!
Aquí una foto del resultado! No más problemas de validación.
Los pasos para la corrección.
1- Obtener la biblioteca de globalización para jQuery
Debes obtener el último guión! También encontré algunas respuestas que estaban desactualizadas.
El objeto para llamar a la biblioteca no es más de $.global ni nada de eso, sino Globalize .
2- Incluye los scripts en tu proyecto. Debes agregarlos después de jquery.validation stuff.
<script src="@Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>
3- Reemplazar algunos métodos del validador. Esto anulará los métodos de validación de ''número'' y ''rango'' que causaron problemas.
$.validator.methods.number = function (value, element) {
return this.optional(element) || !isNaN(Globalize.parseFloat(value));
}
$.validator.methods.range = function (value, element, param) {
return this.optional(element) || (Globalize.parseFloat(value) >= param[0] && Globalize.parseFloat(value) <= param[1]);
}
Globalize.parseFloat => Esto reemplazará todo lo que contenga '','' a ''.'' Si seleccionas una cultura que lo requiera.
Después de esto ... Usted debe agregar. Esto hará que las funciones de globalización trabajen con la cultura.
$(document).ready(function () {
Globalize.culture(''fr-CA'');
// Only there to show which culture are being used.
console.log(Globalize.culture().name);
});
El código completo parece ...
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.form.js")"type="text/javascript"></script>
<script type="text/javascript">
$.validator.methods.number = function (value, element) {
return this.optional(element) || !isNaN(Globalize.parseFloat(value));
}
$.validator.methods.range = function (value, element, param) {
return this.optional(element) || (Globalize.parseFloat(value) >= param[0] && Globalize.parseFloat(value) <= param[1]);
}
$(document).ready(function () {
Globalize.culture(''fr-CA'');
// Only there to show which culture are being used.
console.log(Globalize.culture().name);
});
</script>
</head>
<body>
@RenderBody()
</body>
</html>
Bueno, para resolver el mismo problema, hice:
$.validator.addMethod("price",function(value){
return /^(?:/d+|/d{1,3}(?:/./d{3})+)(?:,/d+)?$/.test(value);
});
y luego usamos el método agregado como regla:
$("#form").validate({
rules: {
price: "price"
}
});
"Tomé prestada" la expresión regular del validador del propio complemento de validación e invertí los puntos . y las comas , (separador decimal separador decimal mil).
Por alguna razón tuve que cambiar mi referencia globalizada desde:
<script src="@Url.Content("~/Scripts/globalize/globalize.js")" type="text/javascript"</script>
a
<script type="text/javascript" src="~/Scripts/globalize/globalize.js"</script>
Y eso solucionó mi problema. Me volví loco por 30 minutos hasta que lo puse a trabajar. Si alguien me puede explicar por qué lo haré.