Saltar al contenido

La validación de MVC / JQuery no acepta la coma como separador decimal

Solución:

Aunque se sugirió que esto es más un problema de jQuery que un problema de MVC, creo que es un problema de MVC.

No, eso no es correcto. Ves un error de validación del lado del cliente porque, de forma predeterminada, jquery.validate.js (un complemento de terceros independiente no asociado con MicroSoft, que MVC usa para la validación del lado del cliente) valida los números basándose en que el separador decimal es un . (punto), no un , (coma).

MVC es un código del lado del servidor y no se ejecuta en el navegador. Para realizar la validación del lado del cliente, MVC HtmlHelper Los métodos que generan controles de formulario representan un conjunto de data-val-* atributos en el html utilizados para describir la validación a realizar, que a su vez son analizados por el jquery.validate.unobtrusive.js plugin cuando el DOM está cargado, y los usa para agregar reglas al $.validator.

En el caso de tu double propiedad agregará una data-val-number atributo (además de data-val-required atributo), que agregará el number regla que se define como

// http://docs.jquery.com/Plugins/Validation/Methods/number
number: function( value, element ) {
    return this.optional(element) || /^-?(?:d+|d{1,3}(?:,d{3})+)?(?:.d+)?$/.test(value);
},

donde el separador decimal es un punto y el separador de miles es una coma (presumiblemente porque el complemento se desarrolló en los EE. UU., por lo que usa un formato de EE. UU.).

Debe sobrescribir el comportamiento predeterminado que puede hacer utilizando complementos como jquery.globalize, o incluyendo el siguiente script (tenga en cuenta que la expresión regular simplemente intercambia el punto y la coma)

$.validator.methods.number = function (value, element) {
    return this.optional(element) || /^-?(?:d+|d{1,3}(?:.d{3})+)?(?:,d+)?$/.test(value);
}

Tenga en cuenta que la secuencia de comandos anterior debe estar después de la jquery.validate.js guión pero no envuelto en $(document).ready()

Lo que lo vincula a MVC para mí es el hecho de que puedo resolver el problema de validación de fecha agregando la línea [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")] al modelo.

En realidad es tu [DataType(DataType.Date)] atributo junto con el [DisplayFormat] atributo que está influyendo en el html que se genera. los [DataType] atributo genera <input type="date" ... /> que a su vez hace que los navegadores HTML-5 datepicker si el navegador lo admite. De acuerdo con las especificaciones, el formato debe ser yyyy-MM-dd (Formato ISO) de ahí la necesidad de [DisplayFormat] atributo también.

El selector de fecha HTML-5 muestra la fecha en la cultura de los navegadores. La imagen que ha mostrado donde está la entrada 26.1.2018 es porque la cultura de su navegador es de-DE, pero si navegara a su sitio, vería 26/1/2018 en la entrada porque mi cultura es en-AU (Australiano), y si un usuario de Estados Unidos navegara a su sitio, vería 1/26/2018.

La razón por la que la validación del lado del cliente funciona para la propiedad de fecha es que el jquery.validate.js El complemento incluye reglas de fecha para ambos formatos de EE. UU. (MM/dd/yyyy) y formato ISO (yyyy-MM-dd).

Y si tuvieras que usar @Html.TextBoxFor(m => m.Inbetriebnahmedatum) (que ignora tu [DataType] y [DisplayFormat] atributos), e ingresó 26.1.2018 en la entrada, también verá un error de validación del lado del cliente.

Creo que el problema es el validador de jquery que usé para resolver el error de coma / punto

$.validator.methods.number = function (value, element) {
    return this.optional(element) || /^-?(?:d+|d{1,3}(?:[s.,]d{3})+)(?:[.,]d+)?$/.test(value);
}

solo intenta jugar con eso

Una solución más robusta podría ser envolver los métodos del validador en su propia función que convierte su número separado por comas en uno que está separado por decimales.

Un truco es usar .call para llamar a la función de validación original como si “esto” fuera el esto original que pensaron los desarrolladores (por ejemplo, usan una función “this.optional” para su validación de pasos).

var originalNumber = $.validator.methods.number;
var wrappedNumber = function (value, element) {
    var fixedValue = parseFloat(value.toString().replace(",", "."));
    return originalNumber.call($.validator.prototype, fixedValue, element);     // Call function as if "this" is the original caller
};
$.validator.methods.number = wrappedNumber;

Puede hacer que esto funcione para cualquier validador, por ejemplo, la validación de pasos:

var originalStep = $.validator.methods.step;
var wrappedStep = function (value, element, param) {
    var fixedValue = parseFloat(value.toString().replace(",", "."));
    return originalStep.call($.validator.prototype, fixedValue, element, param);
};
$.validator.methods.step = wrappedStep;
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *