Problema com Decimais, Vírgulas e Validação do Lado do Cliente
Eu estou tentando alcançar a validação do lado do cliente para umnullable<decimal>
cujo separador decimal pode ser uma vírgula (por exemplo, 123,45).
Na minha opinião:
...
<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...
}
My jQueryFixes overridesjquery.validate.js
arquivo para orange()
enumber()
:
$.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 sugerido em muitos posts / perguntas sobre este assunto (por exemplo:Aqui ouAqui).
Estranhamente,
Quando tento enviar um valor como 123,45, e apesar de ter depurado o script com o Firebug e visto que minhas funções overrode estão sendo chamadas e retornando true, não estou conseguindo enviar o formulário. Em vez disso, meu EditorFor para o valor decimal está sendo focado por qualquer motivo e não consigo descobrir por quê.
(Acredito que minha validação do lado do servidor - usando um fichário personalizado, etc.) está funcionando bem e quenão é o problema aqui: Eu gostaria de alguma ajuda sobre como obter o formulário para enviar ou porque o campo de entrada está ficando focado, mesmo que pareça válido.)
EDIT 1:
Informação adicional. No meu 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:
Após a sugestão @LeftyX, tentei usar o script Globalize (depois de remover meu 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>
... mas ainda enfrento o mesmo problema: ovalidator.methods.number
está retornando true, mas o formulário não é enviado e o campo de entrada fica focado.
Se eu inspecionar o elemento de entrada enquanto envio, posso ver que ele vai rapidamenteclass="valid"
paraclass='input-validation-error'
e depois de volta paravalid
. Muito estranho.
CONCLUSÃO:
A @LeftyX deu uma solução muito boa e completa para quem encontrar os mesmos problemas.
Eu já tinha um fichário de modelo personalizado para os decimais anuláveis, mas o script de globalização e incluindo a cultura no modelo / ViewModel com certeza vem a calhar.
Outra razão para o meu problema poderia ser o fato de que eu estava (acidentalmente) incluindo alguns scripts duas vezes.
ATUALIZAÇÃO (jul / 2015):
globalize.js é um pouco diferente agora. Ref. paraesta resposta ea documentação para as etapas atualizadas.