Problema con decimales, comas y validación del lado del cliente
Estoy tratando de lograr la validación del lado del cliente para unanullable<decimal>
cuyo separador decimal puede ser una coma (por ejemplo, 123,45).
En mi vista:
...
<div class="editor-label">
@Html.LabelFor(model => model.Turnover)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Turnover)
@Html.ValidationMessageFor(model => model.Turnover)
</div>
...
@section Scripts {
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jQueryFixes")
...scripts for this view...
}
Mi jQueryFixes anulajquery.validate.js
archivo para elrange()
ynumber()
:
$.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);
}
... como se sugiere en muchas publicaciones / preguntas relacionadas con este tema (por ejemplo:aquí oaquí).
Curiosamente:
Cuando trato de enviar un valor como 123,45, y aunque he depurado la secuencia de comandos con Firebug y he visto que mis funciones anuladas están siendo llamadas y devueltas, no puedo enviar el formulario. En cambio, mi EditorFor para el valor decimal se está enfocando por cualquier razón y parece que no puedo descubrir por qué.
(Creo que mi validación del lado del servidor - usando un cuaderno personalizado, etc. - está funcionando bien y esono es el problema aquí: Me gustaría recibir ayuda sobre cómo hacer que se envíe el formulario o por qué el campo de entrada se está enfocando aunque parece válido.
EDITAR 1:
Información adicional. En mi BundlesConfig.cs:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
...
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/jQueryFixes").Include(
"~/Scripts/jQueryFixes.js"));
...
EDIT 2:
Después de la sugerencia de @LeftyX, intenté usar el script Globalize (después de eliminar mi jQueryFixes.js):
<script type="text/javascript">
...
$( document ).ready(function() {
Globalize.culture("en-US", "pt-PT");
});
$.validator.methods.number = function (value, element) {
return this.optional(element) || jQuery.isNumeric(Globalize.parseFloat(value));
}
//Fix the range to use globalized methods
jQuery.extend(jQuery.validator.methods, {
range: function (value, element, param) {
var val = Globalize.parseFloat(value);
return this.optional(element) || (val >= param[0] && val <= param[1]);
}
});
...
</script>
... pero sigo enfrentando el mismo problema: elvalidator.methods.number
devuelve true, pero el formulario no se envía y el campo de entrada se enfoca en su lugar.
Si inspecciono el elemento de entrada mientras envío, puedo ver que rápidamente pasa declass="valid"
aclass='input-validation-error'
y luego volver avalid
. Muy extraño.
CONCLUSIÓN:
@LeftyX dio una solución muy buena y completa para quien encuentre los mismos problemas.
Ya tenía una carpeta de modelos personalizada para los decimales que admiten nulos, pero el script de globalización y la inclusión de la cultura en Model / ViewModel son muy útiles.
Otra razón de mi problema podría ser el hecho de que (accidentalmente) incluí dos scripts dos veces.
ACTUALIZACIÓN (julio / 2015):
globalize.js Es un poco diferente ahora. Árbitro. aesta respuesta yla documentación para los pasos actualizados.