Archivi tag: Prototype

Magento: Validazione Javascript personalizzata di campi Form

Magento mette a disposizione una serie di controlli dei vari campi Form:

validate-select – Seleziona un valore dalla Lista

required-entry – Campo obbligatorio

validate-number – Inserisci un numero valido

validate-digits – Inserisci solo numeri, spazio  e altri caratteri come i punti e le virgole esclusi

validate-alpha – Usa solo lettere (a-z or A-Z)

validate-code – Usa lettere (a-z), numeri (0-9) o underscore (_), il primo carattere deve essere una lettera

validate-alphanum – Usa solo lettere (a-z or A-Z) o numeri (0-9). Non sono ammessi spazi o altri caratteri

validate-street – Usa solo lettere (a-z or A-Z), numeri (0-9),  spazi, o il carattere cancelletto #

validate-phoneStrict – Inserisci un numero di telefono validio. Per esempio (123) 456-7890 o 123-456-7890

validate-phoneLax – Inserisci un numero di telefono valido. Per esempio (123) 456-7890 o 123-456-7890

validate-fax – Inserisci un numero di Fax valido. Per esempio (123) 456-7890 o 123-456-7890

validate-date – Inserisci una data valida

validate-email – Inserisci un indirizzo email valido. Per esempio johndoe@domain.com

validate-emailSender – Usa solo lettere (a-z or A-Z), numeri (0-9) , underscore (_) o spazi

validate-password – Inserisci 6 o più caratteri. Gli spazi ad inizio e fine saranno ignorati

validate-admin-password – Inserisci 7 o più caratteri. La Password deve contenere sia numeri che lettere

validate-cpassword – Verifica che la Passwordi di controllo sia uguale

validate-url – Inserisci un valido URL. http:// è obbligatorio

validate-clean-url – Inserisci un valido URL. Per esempio http://www.example.com o www.example.com

validate-identifier – Inserisci un valido ID. Per esempio example-page, example-page.html o anotherlevel/example-page

validate-xml-identifier – Inserisci un valido ID XML. Per esempio something_1, block5, id-4

validate-ssn – Inserisci un valido SSN. Per esempio 123-45-6789

validate-zip – Inserisci un valido CAP. Per esempio 90602 o 90602-1234

validate-zip-international – Inserisci un valido CAP

validate-date-au – Formato data non corretto usa: dd/mm/yyyy. Per esempio 17/03/2006

validate-currency-dollar – Inserisci una valuta corretta. Per esempio $100.00

validate-one-required – Seleziona una delle opzioni

validate-one-required-by-name – Seleziona una delle opzioni

validate-not-negative-number – Inserisci un numero positivo

validate-state – Seleziona lo Stato/Provincia

validate-new-password – Inserisci 6 o più caratteri. Gli spazi iniziali e finali saranno ignorati

validate-greater-than-zero – Inserisci un numero maggiore di 0

validate-zero-or-greater – Inserisci un numero maggiore o uguale a 0

validate-cc-number – Inserisci un numero di Carta di Credito valido

validate-cc-type – Il numero di Carta di Credi con corrisponde con il Tipo di Carta

validate-cc-type-select – Il Tipo di Carta non corrsisponde con il numero di Carta di Credito

validate-cc-exp – Data scadenza non corretta

validate-cc-cvn – Numero di verifica non valido

validate-data – Usa solo lettere (a-z or A-Z), numeri (0-9) o underscore (_), il primo carattere deve essere una lettera

validate-css-length – Inserisci una lunghezza valida per i CSS. Per esempio 100px o 77pt o 20em o .5ex o 50%

validate-length – Lunghezza massima superata

Per utilizzare queste validazione basta inserire una classe CSS con la verifica che deve essere implementata, ad es:

<input type="text"
id="field_id"
name="field_name"
value="value"
class="required-entry validate-alphanum"
/>

Nell’esempio sopra, richiediamo che il campo field_name sia obbligatorio e che contenga solo lettere (a-z e A-Z) e numeri (0-9).

Se invece volessimo fare dei controlli più specifici, come ad esempio il controllo del codice fiscale, possiamo creare una nostra validazione da inserire in Magento e per poi essere riutilizzata in tutto il sito. Per farlo è sufficiente inserire poche codice di Javascript:

if(Validation) {
Validation.addAllThese([
               [
                'validate-tuocontrollo',
                'Messaggio da visualizzare',
                function(v,r){
                  return v.indexOf('RCC')==-1?false:true;
                }
                ]
           ]);
}

Dove:
validate-tuocontrollo: è la classe CSS che va inserita nel tag input
Messaggio da visualizzare: E’ il messaggio che verrà visualizzato all’utente nel caso in cui il controllo fallisce
function (v,r)…: E’ il controllo Javascript che si occuperà di validare il campo, il parametro v è il valore del campo mentre il parametro r è l’oggetto HTML da validare, nel nostro caso il TAG input

Per estendere il nostro controllo al tag dell’esempio sopra basta inserire la classe validate-tuocontrollo

 <input type="text"
              id="field_id"
              name="field_name"
              value="value"
              class="required-entry validate-alphanum validate-tuocontrollo"
/>

Il codice Javascript di cui sopra, puo’ essere inserito in:

– In un file JS apposito che dovrà essere incluso nella pagina contenente il campo da validare
– Direttamente nel blocco phtml che contiene il campo da validare.

Riferimenti in inglese:

http://fishpig.co.uk/magento-forms-prototype-javascript-validation/
http://blog.baobaz.com/en/blog/custom-javascript-form-validators

Share