Jak sprawdzić poprawność formularza w Magento Javascript podczas pisania

Question

Magento ma świetną bibliotekę walidacji Javascript, którą można zainicjować var myForm= new VarienForm('[your form id]', true);. Jednak ta funkcja sprawdzania poprawności jest uruchamiana po jednym kliknięciu przycisku przesyłania.

Nie ma sposobu sprawdzania poprawności konkretnego pola podczas pisania. Na przykład, jeśli wpiszę 2-cyfrowy kod pocztowy i przejdę do drugiego pola, powinien on natychmiast zweryfikować kod pocztowy i pokazać błąd. Kod pocztowy wymaga co najmniej 5 cyfr.

dzięki

Answer 1

Tak, Magento zapewnia niesamowitą bibliotekę walidacji. Możesz wywołać sprawdzanie poprawności dla każdego pola metodą "sprawdzania poprawności".

Na przykład w celu sprawdzenia kodu pocztowego można obserwować zdarzenie rozmycia i wywoływać metodę validate.

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

Zawiadomienie Validation.validate($('billing:postcode')), spowoduje to sprawdzenie poprawności pola kodu pocztowego.

Answer 2

można napisać klasę zwyczaj sprawdzania:

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

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

Answer 3

Nie 100%, w jaki sposób chcesz je realizować, ale można użyć słuchacza Prototypy zdarzeń. Próbowałem spinanie w celu walidacji formularza Magento kiedyś w celu powstrzymania wielokrotne zgłaszanie formularzy, kod był podobny do tego, co znajduje się poniżej, ale zmieniłem to trochę pasować do Twoich wymagań:

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

Najpierw utwórz dla swojego formularza.

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

Następnie uruchom ten kawałek javascript, aby włączyć zwykły stary formularz do VarienForm

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

Następnie napisać walidację jako funkcję javascript stosując metodę Validation.add. (Walidacja jest globalnym używany do przechowywania wszystkich reguł sprawdzania poprawności formularza)

<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> 

Aby uzyskać więcej informacji obserwować tą link.

Answer 5

nie dodając nic nowego tutaj, ale jeśli chcesz, aby wyciąć i wkleić szybki sposób tworzenia wielu walidacji dla swojej postaci, wystarczy dodać do fields tablicy:

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