Come convalidare forma in Magento JavaScript durante la digitazione

Question

Magento ha impressionante convalida biblioteca Javascript, che può essere inizializzato var myForm= new VarienForm('[your form id]', true);. Tuttavia questa funzione di convalida viene attivata quando si fa clic sul pulsante di invio.

Non C'è modo per convalidare campo particolare durante la digitazione. Per esempio, se si digita il codice postale a 2 cifre e andare a secondo campo, dovrebbe convalidare istantaneamente codice postale e l'errore spettacolo. Dato che il codice postale richiede almeno 5 cifre.

grazie

Answer 1

Sì, Magento fornisce una fantastica libreria di validazione. Puoi chiamare la convalida per ogni campo con il metodo `validate '.

Per esempio per convalidare il codice postale, è possibile osservare evento sfocatura e chiamare validate metodo.

$('billing:postcode').observe('change', function(e){ 
    Validation.validate($('billing:postcode')) 
}) 

Avviso Validation.validate($('billing:postcode')), questo chiamerà convalida per Cap campo.

Answer 2

È possibile scrivere una classe di convalida personalizzata:

Validation.add('validate-float','Error message',function(v){ 
    return Validation.get('IsEmpty').test(v) || (!/\./.test(v)); 
}); 

Sede - https://magento.stackexchange.com/a/15165/4832

Answer 3

non al 100% su come si sarebbe implementare, ma è possibile utilizzare Prototipi evento ascoltatore. Ho provato a collegare per la validazione dei form di Magento una volta prima al fine di fermare più l'invio di moduli, il codice era simile a ciò che è al di sotto, ma ho cambiato un po 'per adattarsi con le vostre esigenze:

new Event.observe('contactForm', 'keyup', function(e){ 
    e.stop(); 

    if(contactForm.validator && !contactForm.validator.validate()) { 
     //do something here because it failed validation 
     return; 
    } 


}); 

Answer 4

In primo luogo, creare per il modulo.

<form action="<?php echo $this->getUrl('/some/route/thing');?>" id="theForm"> 
    <input type="text" name="foo" id="foo" /> 
</form> 

successivo, eseguire questo po 'di javascript per trasformare la vostra vecchia forma normale in VarienForm

<script type="text/javascript"> 
//<![CDATA[ 
    var theForm = new VarienForm('theForm', true); 
//]]> 
</script> 

Quindi, scrivere il vostro convalida come una funzione javascript utilizzando il metodo Validation.add. (La validazione è un globale utilizzato per memorizzare tutte le regole di convalida modulo)

<script type="text/javascript"> 
//<![CDATA[ 
    var theForm = new VarienForm('theForm', true); 
    Validation.add('validate-must-be-baz','You failed to enter baz!',function(the_field_value){ 
     if(the_field_value == 'baz') 
     { 
      return true; 
     } 
     return false; 
    }); 

//]]> 
</script> 

Per maggiori informazioni segui questo link.

Answer 5

non aggiungendo nulla di nuovo qui, ma se si vuole tagliare e incollare un modo rapido per creare più convalide per il modulo, basta aggiungere alla fields matrice:

var fields = ['firstname', 'lastname', 'telephone', 'street1', 'region_id', 'country_id', 'city', 'postcode']; 

fields.map(function (fld) { 
    $('billing:' + fld).observe('change', function(e){ 
     Validation.validate($('billing:' + fld)) 
    }); 
});