2012-02-09 15 views
16

Provo ad utilizzare il plugin di globalizzazione jQuery per correggere il problema della virgola con la convalida del client non ostruente di jquery. Tuttavia ho provato molte soluzioni e non c'è una buona soluzione per risolvere questo problema. Sono su un computer di localizzazione non inglese e questo è importante che i miei clienti inseriscano un valore decimale come "123,66" e non "123,66". La convalida di ASP.NET mi dice che il prezzo deve essere un numero! meh? sei serio ? lolImpossibile far funzionare la globalizzazione jquery

Mi viene visualizzato questo errore javascript quando provo a eseguire la correzione.

$.global is undefined 

Ecco il mio codice.

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); 
} 

Non riesco a capire .. dovrebbe funzionare da quando ho aggiunto ~/Scripts/globalize.js.

Qualche idea? oppure potresti avere una soluzione migliore per far funzionare la validazione del client e consentirmi di inserire la virgola come valori decimali?

+0

Grazie per il codice di validazione dell'intervallo! –

risposta

21

Ho trovato il modo per eliminare definitivamente il problema decimale con il separatore di virgola!

Qui un'immagine del risultato! Niente più problemi di validazione.

enter image description here

La procedura per la correzione.

1- Prendi il Globalization library for jQuery

È necessario ottenere l'ultima sceneggiatura! Inoltre ho trovato alcune risposte là fuori che erano obsolete.
L'oggetto per chiamare la libreria non è più $.global o qualcosa di simile, ma Globalize.

2- Includere gli script nel progetto. È necessario aggiungerli dopo le attività jquery.validation.

<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- sostituire alcuni metodi del validatore. Ciò sovrascriverà i metodi per la convalida di "numero" e "intervallo" che causa problemi.

$.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 => Questo effettivamente sostituire tutto ciò che contiene '' a '' se hai selezionato una cultura che lo richiede.

Dopo questo .. È necessario aggiungere. Ciò renderà le funzioni di globalizzazione compatibili con la cultura.

$(document).ready(function() { 
     Globalize.culture('fr-CA'); 

     // Only there to show which culture are being used. 
     console.log(Globalize.culture().name); 
}); 

Il look completo codice come ...

<!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> 
+0

Puoi contrassegnare la nostra risposta come risposta accettata. Merci :-) – Ubikuity

+0

Grazie. L'ho fatto! :) – Rushino

+0

Dove si trova il file Globalize.js nell'URL github? – Levimatt

2

Bene, per risolvere lo stesso problema, ho fatto:

$.validator.addMethod("price",function(value){ 
    return /^(?:\d+|\d{1,3}(?:\.\d{3})+)(?:,\d+)?$/.test(value); 
}); 

e quindi utilizzato il metodo aggiunto come regola:

$("#form").validate({ 
    rules: { 
     price: "price" 
    } 
}); 

I "preso in prestito" la regex validatore dal plugin di convalida in sé e invertito i punti . e le virgole , (separatore decimale X separatore X).

+0

Dove l'hai convalidato (...)? – Rushino

+0

http://docs.jquery.com/Plugins/Validation/ - guarda "Visualizza sorgente" del primo Esempio/Demo –

+0

Sto iniziando a pensare che non dovrei usare la convalida non ostruttiva da asp.net mvc ma usare solo il plugin invece. (So ​​che asp.net mvc usa quel plugin ma sembra che io non abbia il controllo su qualcosa che mi causa molti problemi) – Rushino

0

Per una qualche ragione ho dovuto cambiare il mio riferimento globalizzare da:

<script src="@Url.Content("~/Scripts/globalize/globalize.js")" type="text/javascript"</script> 

a

<script type="text/javascript" src="~/Scripts/globalize/globalize.js"</script> 

E questo ha risolto il mio problema. Sono impazzito per 30 minuti fino a quando non ho potuto farlo funzionare. Se qualcuno può spiegare perché apparo.

Problemi correlati