Question

To start with, I tried to search on stackoverflow for the similar topic. I understand some similar posts got shut down because of there are answered posts for it already, which I don’t really find it’s helpful(here: zend form validation, maybe I am not clever enough), so please admin, allow this post to stay for a while>**

In my case, first I state the form in my controller:

        $this->_helper->layout->disableLayout();
    $form = new Zend_Form();
    $form->setAction('/user/login')
         ->setMethod('post');

    // Create and configure username element:
    $username = $form->createElement('text', 'username');
    $username->addValidator('alnum')
             ->addValidator('regex', false, array('/^[a-z]+/'))
             ->addValidator('stringLength', false, array(6, 20))
             ->setRequired(true)
             ->addFilter('StringToLower');

    // Create and configure password element:
    $password = $form->createElement('password', 'password');
    $password->addValidator('StringLength', false, array(6))
             ->setRequired(true);

    // Add elements to form:
    $form->addElement($username)
         ->addElement($password)
         // use addElement() as a factory to create 'Login' button:
         ->addElement('submit', 'login', array('label' => 'Login'));

Then I output in my view file:

<?php echo  $this->testForm;?> 

And we found some really cool Jquery plugin for form validator but I don’t see how it’s possibly I integrate it with the code in Zend Form. I try to refernce Zendx_Jquery, it seems that even doesn’t include a form-validation option.

Could anyone shred a light? Thanks.

PS, you might find in my code I already I have some params for validations, that’s not what I want, all I want for front-end using some jquery plugin for real-time input validation.

Answer 1

To add jQuery validation you can add some decorators to form, example :

    $form->setName('postForm');
    $form->setMethod('post');
    $form->addDecorator('HtmlTag', array('tag' => 'div', 'class' => 'my-lovely-form'));
    $form->setAttrib('enctype', 'multipart/form-data');

Then you do jQuery validation in View.phtml example:

$('#postForm').validate({
            submitHandler: function(form) {
                $("#submit").attr('disabled', 'disabled');
                form.submit();
            },
            onchange: true,         
            errorLabelContainer: $('.error-container'),
            wrapper: "p",
            rules: {
                name: {
                    required: true,
                    minlength: <?php echo $this->validationConfig->form->name->minlength; ?>,
                    maxlength: <?php echo $this->validationConfig->form->name->maxlength; ?>
                },
                title: {
                    required: true,
                    minlength: <?php echo $this->validationConfig->form->title->minlength; ?>,
                    maxlength: <?php echo $this->validationConfig->form->title->maxlength; ?>
                }
            },
            messages: {
                name: {
                    required: "Full name is required",
                    minlength: "Full name has to be at least <?php echo $this->validationConfig->form->name->minlength; ?> characters long",
                    maxlength: "Full name has to be less than <?php echo $this->validationConfig->form->name->maxlength; ?> characters long"
                },
                title: {
                    required: "Title is required",
                    minlength: "Title has to be at least <?php echo $this->validationConfig->form->title->minlength; ?> characters long",
                    maxlength: "Title has to be less than <?php echo $this->validationConfig->form->title->maxlength; ?> characters long"
                }
            }
        });

I hope this can help you.