Jak przeprowadzać walidację na wieloetapowym formularzu client-side?

Witam, poszukuję rozwiązania problemu, a mianowicie:

Mam formularz podzielony na odpowiednie kroki. Po wypełnieniu danego kroku i kliknięciu dalej, zostaje przeprowadzona validacja(Jquery - Ajax). Również, po kliknięciu w dany input zostaje przeprowadzona validacja, tej jednej kontrolki. Validacja polega na dodaniu nowego diva z informacją o błędzie. Gdy błąd zostanie naprawiony, div z błędem zostaje usunięty. Formularz powinien działać w ten sposób, że po kliknięciu w przycisk dalej i wykonaniu validacji, ma zostać sprawdzone, czy wszystkie pola nie posiadają błędu. Jeśli nie posiadają wtedy ten krok, ma otrzymać display:none, a pojawić ma się krok drugi. Problem polega na tym, że nie wiem jak wykonać walidację i jednocześnie sprawdzenie czy wszystkie inputy są poprawne a następnie przejście do następnego kroku. Dane są przesyłane jsonem.

kod:

 
  public function validateformAction()
    {
        $this->_helper->viewRenderer->setNoRender();
        $this->_helper->getHelper('layout')->disableLayout();

        $f = new Application_Form_Register();
        $f->isValid($this->_getAllParams());
        $json = $f->getMessages();
        header('Content-type: application/json');
        echo Zend_Json::encode($json);
    }

$(document).on('ready', function(){
    $("input").blur(function()
    {   
        var formElementId = $(this).data('validate');
            doValidation(formElementId);
    });
    
    $("#first").on('click', function() {
       $('input').each(function()
        {
            doValidation($(this).data('validate'));
        });

    });
	
	function doValidation(id)
{ 

    var url = 'tutaj jest url'
    var data = {};
    $("input").each(function()
    {
        data[$(this).data('validate')] = $(this).val();
    });

    $.post( 
            url, 
            data, 
            function(resp)
            {        
                $("#"+id).parent().find('.errors').remove();
                $("#"+id).parent().append(getErrorHtml(resp[id], id));
            }
            ,'json');             
}

function getErrorHtml(formErrors , id)
{
    var o = '<ul id="errors-'+id+'" class="errors">';
    for(errorKey in formErrors)
    {
        o += '<li class="error">' + formErrors[errorKey] + '</li>';
        error =true;
    }
    o += '</ul>';
    return o;
}

Pracuję nad frameworku Zend. I do walidacji używam funkcji zenda.

Proszę o pomoc, jeśli ktoś jest w stanie mi pomóc.

up! dodałem kod

Validacje w zendzie przeprowadzasz na podstawie Application_Form_Register tam masz w polach stawiona walidacje co ma ci walidowac i w jaki sposob dobrze mysle ? masz kod tej formy ?

Tak.

 
 $this->addElement(
            'text',
            'input1',
            array(
                'required' => true,
                'placeholder'    => 'input1',
                'data-validate' => 'input',
                'filters'  => array('StringTrim'), 
                'decorators' => array(
                         'ViewHelper',  
                         'Errors',
                          array('HtmlTag',
                                array('tag' => 'div', 'class' => 'input1')
                               
                          )                            
                    ),
                'validators' => array(
                    array(
                        'Db_NoRecordExists',
                        true,
                        array('table' => 'input1', 'field' => 'input1')
                    ),
                )
            )
                
        );


$this->input1->getValidator('Db_NoRecordExists')->setMessage("input1 exists!");

$this->addElement(
            'text',
            'email',
            array(
                'required' => true,
                'filters'  => array('StringTrim','StripTags'), 
                'data-validate' => 'email',
                'decorators' => array(
                          'ViewHelper', 
                          'Errors',
                          array('HtmlTag',
                                array('tag' => 'div', 'class' => 'email')
                          )                            
                    ), 
                'validators' => array(
                    array(
                      'EmailAddress',  TRUE  
                    ),
                    array(
                        'Db_NoRecordExists',
                        true,
                        array('table' => 'input1', 'field' => 'email')
                    ),
                )
                
            )
        );

        $this->addElement(
            'password',
            'password',
            array(
                'required' => true,   
                'filters'  => array('StringTrim','StripTags'), 
                'data-validate' => 'password',
                'decorators' => array(
                          'ViewHelper', 
                          'Errors',
                          array('HtmlTag',
                                array('tag' => 'div', 'class' => 'password')
                              
                          )                            
                    ),
                'validators' => array(
                    array(
                      'StringLength', true, array('min' => 6, 'max' => 30) 
                    ),
                    )
            )
        );
        $this->password->getValidator('StringLength')->setMessages(
                array(Zend_Validate_StringLength::TOO_SHORT => "Password must have more  than 6 characters long",
                        Zend_Validate_StringLength::TOO_LONG => "Password can not be longer than 30 characters"
                    )
        );
 $this->addElement(
            'button',
            'next',
            array(
                'ignore'   => true,
                'label'    => 'next',
                'class'    => 'submit',
                'decorators' => array(
                          'ViewHelper', 
                          array('HtmlTag',
                                array('tag' => 'div', 'class' => 'btn')
                          )                            
                    ),
            )
        );

 $this->addElement(
            'button',
            'submit',
            array(
                'ignore'   => true,
                'label'    => 'next',
                'class'    => 'submit',
                'decorators' => array(
                          'ViewHelper', 
                          array('HtmlTag',
                                array('tag' => 'div', 'class' => 'btn')
                          )                            
                    ),
            )
        );

A gdy wciskasz guzik dalej i przesylasz juz te sprawdzone czesciowo zmienne to czy masz w kodzie w kontrolerze coś podobnego jak poniżej:

$f = new Application_Form_Register();
if($this->_request->isPost()){
    if($f->validate($this->_request->getPost())){ 
        echo "walidacja ok";
    } else 
        echo "walidacja not ok";
}

Tak, tylko problem polega na tym, że ja klikając next nie przesyłam jeszcze danych Postem, tylko sprawdzam tą cześć formularza. Dopiero w ostatnim kroku przesyłam cały formularz i sprawdzam czy poprawny jest.

Poradziłem sobie trochę na opak. W kontrolerze w którym mam funkcje validującą, która zwraca mi treść błędów w postaci json, zrobiłem wyjątek żeby funkcja zwracała false, gdy brak jest wiadomości o błędach.

 
public function validateformAction()
    {
        $this->_helper->viewRenderer->setNoRender();
        $this->_helper->getHelper('layout')->disableLayout();

        $f = new Application_Form_Register();
        $f->isValid($this->_getAllParams());
        
        $json = $f->getMessages();

        header('Content-type: application/json');
        if (empty($json)) {
            return false;
        }else {
            echo Zend_Json::encode($json);
        }
        
    }

Potem już używając Jquery sprawdzam, czy jest odpowiedź z serwera, używając do tego .done(), .fail() i wtedy gdy brak jest odpowiedzi, mogę przejść do następnego kroku. Nie wiem czy jest to poprawne rozwiązanie, ale na razie nie mam pomysłu na lepsze. Pozdrawiam

W swoim projekcie robisz sobiew katalogu w controllers/AjaxController.php
w nim robisz funkcje

public function validateformAction()
    {
        $this->_helper->viewRenderer->setNoRender();
        $this->_helper->getHelper('layout')->disableLayout();
 
        $f = new Application_Form_Register();
        $f->isValid($this->_getAllParams());

         exit(json_encode($f->getMessages()));
     }

potem w widoku odpowiednim robisz w JS w JQuery czy jak to sie tam zwie

<script type="text/javascript">

    function validateform(){
       var tabParams = {
           'id' : costam,
           'params2' : cpstam innego
        }
        $.post('/ajax/validateform', tabParams, function(varData){

            te rzeczy co ma robic jak jest blad a co jak nie ma  
w varData masz zwrotke w json wiec z tego mozesz ogarnac sprawy
        }, 'json'); 
    }
</script>

Ja wszystko co mam wlasnie robione w ajaxie wrzucam do kontrollera ajax i tak to ogarniam. Sposob Twoj tez jest dobry bo masz po prostu gdzie indziej kontroler inna nazwa ale ta funkcja co potrzebujesz. W katalogu view/ajax mam akurat pusty ale dobrze jest zrobic sobie puste pliki *.phtml z nazwami funkcji jesli chcesz miec na szybko ich spis. ale nie jest to wymagane

Niestety używając mojego sposobu wróciłem do punktu wyjścia. Ponieważ jeśli w następnym kroku będę miał jakiś input do validacji, to przy pobieraniu danych przez kontroler do validacji, zawsze mi będzie pokazywał ten błąd z kolejnego kroku. Przez to nie będę mógł przejść do następnego, bo zawsze otrzymam odpowiedz z serwera, z błędami z następnych kroków...

Czy da się jakoś w zendzie pobrać dane nie z całej formatki tylko ze wskazanych części?

$zmienna1 = $this->_request->getPost('nazwa1_z_formularza'); 
$zmienna2 = $this->_request->getPost('nazwa2_z_formularza'); 

$test = array(
    "nazwa1_z_formularza" => "$zmienna1",
    "nazwa2_z_formularza" => "$zmienna2",
); 

if($form->isValidPartial($test)) 
{ kod jesli ok

Jest problem z pobraniem danych, bo gdy używam np: $zmienna1 = $this->_request->getPost('nazwa1_z_formularza'); zwracam mi nulla mimo tego, że poprawną nazwę zmiennej posiadam.

Tylko niestety problem polega na tym, że do chciałem do validacji użyć validatorów z zenda, dlatego nie zbudowałem all w jquery i by nie było problemów. Coś spróbuję jeszcze pomyśleć, może uda się w jakiś inny sposób. Pozdrawiam i dzięki za wszelką pomoc.

a czy dolaczanie do formularza zmiennych ze sprawdzonego juz kroku do czesci niesprawdzonej jako pol ukrytych nie rozwiazaloby problemu???

szalonyfacet napisał(a):

a czy dolaczanie do formularza zmiennych ze sprawdzonego juz kroku do czesci niesprawdzonej jako pol ukrytych nie rozwiazaloby problemu???

Problem jest, że nie przejdę do drugiego kroku, jeśli wykonam to tak jak chciałem wyżej, czyli z pobraniem wiadomości i zwróceniu false, jeśli brak wiadomości. Jeśli w pierwszym kroku np mam :
-username
-password
a w drugim kroku np:
-miasto
To przy pobraniu błędów będę miał:

{"username":{"isEmpty":"Value is required and can't be empty"},"password":{"isEmpty":"Value is required and can't be empty"}, "city":{"isEmpty":"Value is required and can't be empty"}}

Po wpisaniu wszystkich danych żądanie zwróci mi:

{"city":{"isEmpty":"Value is required and can't be empty"}}

I tutaj jest pies pogrzebany, bo

 
if (empty($json)) {
            return false;
}

Nie zadziała...