Zend_Dojo Email validation, checkbox and Submit dojo form question- please?

[vladimirn]

Hello guys,
I made my first Zend_dojo_form and I have 3 questions so far :)


I've attached file with my signupController.php because its to long to be posted here.signupController.php.txt
Its .txt but you can see whats inside.


I dont know how to do next things:
1. All fields in my form are required. But if you hit Submit button, all validation are some kind a avoided and i am redirected to my form action (signup/process). How to prevent form to do this?
My Code:
$footer= new Zend_Dojo_Form_SubForm();
        $footer->setAttribs(array('name' => 'footerData','legend' => 'Submit','style' => 'clear:both'));
                                $footer->addElement('SubmitButton', 'submit', array(
        'label' => 'Submit!'
        ));
       
        $form = $form ->addSubForm($personalData, 'personalData')
                                        ->addSubForm($agreements,'agreements')
                                        ->addSubForm($footer,'footerData');
2. I also have a 3 checkbox. All 3 must be checked to procced. But form procced no matter what.
My code:
$agreements= new Zend_Dojo_Form_SubForm();
        $agreements->setAttribs(array('name' => 'agreements','legend' => 'Submit','class' => 'agreements'));
        $agreements ->addElement('checkbox','ages',array('required' =>true,'checked'=>true,'style'=>'float:left' ,'label'=>'I\'m Over 18 years old','invalidMessage' => 'You must validate that you are over 18',))
                                ->addElement('checkbox','promotions',array('required' =>true,'checked'=>true,'style'=>'float:left' ,'label'=>'I agree NOT to send any email promotions promoting this web site','invalidMessage' => 'You must validate that you are over 18',))
                                ->addElement('checkbox','terms',array('required' =>true,'checked'=>true,'style'=>'float:left' ,'label'=>'I agree to the Terms & Conditions','invalidMessage' => 'You must validate that you are over 18',));
       
3. Is there any way to validate a field if i need that this field have a valid URL address?
My code:
$personalData->addElement (
                                'validationTextBox',
                                'url',
                                array (
                                'label' => 'Main Site URL:',
                                'lowercase' => 'true',
                                'maxlength' => 40,
                                'value'=>'http://',
                                'required' => true,
                                'invalidMessage' => 'Please enter your web site URL.',
                                'filters' => array (
                                                'StringTrim',
                                                'StringToLower' ),
                                'validators' => array (
                                                'NotEmpty',) ) )

4. Is it possible to validate Email address with Zend_Dojo_Form?
My code is like this:
$personalData->addElement(
                                'validationTextBox',
                                'email',
                                array(
                                'required' => true ,
                                'label' => 'Email address' ,
                                'invalidMessage' => 'Please provide valid Email address.',
                                'filters' => array('StringTrim',
                                                'StringToLower') ,
                                'validators' => array('NotEmpty',
                                                                array('StringLength', true, array (6, 20 ) ),
                                                                array('EmailAddress' , true, array())))
                                                )

This aint work :)
Can someone help me on this please?
Thanks Vladimir

[weierophinney]

-- vladimirn <[hidden email]> wrote
(on Thursday, 11 September 2008, 02:52 PM -0700):

> I've attached file with my signupController.php because its to long to be
> posted here. http://www.nabble.com/file/p19441003/signupController.php.txt
> signupController.php.txt
> Its .txt but you can see whats inside.
>
>
> I dont know how to do next things:
> 1. All fields in my form are required. But if you hit Submit button, all
> validation are some kind a avoided and i am redirected to my form action
> (signup/process). How to prevent form to do this?

You need to bind to the onSubmit event of your form, and validate in
your callback. One way to do this is as follows, from your view script:

<? $this->dojo()->javascriptCaptureStart() ?>
function validateForm() {
    var form = dijit.byId("<formId>");
    if (!form.validate()) {
        alert("Invalid form");
        return false;
    }
    return true;
}
<? $this->dojo()->javascriptCaptureEnd() ?>
<? $this->dojo()->onLoadCaptureStart() ?>
function () {
    dojo.connect(dijit.byId("<formId>"), "onSubmit", "validateForm");
}
<? $this->dojo()->onLoadCaptureEnd() ?>

What the above does is connect the onSubmit event to the form, which
then executes the validateForm() function; if this returns false,
submission is halted, and, in this case, an alert raised. You could also
popup a dialog box or some other notification.

> 2. I also have a 3 checkbox. All 3 must be checked to procced. But form
> procced no matter what.

The above should also correct this.

> 3. Is there any way to validate a field if i need that this field have a
> valid URL address?

Google for a good URL regular expression, and add it to your element as
the "regExp" option. Make sure it doesn't contain boundaries (i.e., the
"/^\d+$/" you'd pass to preg_match() would become "^\d+$" for dojo).

> 4. Is it possible to validate Email address with Zend_Dojo_Form?

Yes. Again, google for a reasonable email regexp, and add it as the
regExp option to your element.


--
Matthew Weier O'Phinney
Software Architect       | [hidden email]
Zend Framework           | http://framework.zend.com/

[vladimirn]

Dear Matthew,
thanks for your help.
I managed to prevent submiting form before all required fields are properly filled.


Email:
->addElement ( 'validationTextBox', 'email', array ('required' => true, 'label' => 'Email address', 'regExp' => '\b[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}\b', 'invalidMessage' => 'Please provide valid Email address.', 'filters' => array ('StringTrim', 'StringToLower' ), 'validators' => array ('NotEmpty', array ('StringLength', true, array (6, 20 ) ), array ('Regex', true, array ('/\w+/i' ) ) ) ) )
(maybe someone will find this usefull)

BUT! :))

my checkboxes wont work :)

$agreements
->addElement ( 'checkbox', 'ages', array ('required' => true, 'label' => 'I\'m Over 18 years old', 'invalidMessage' => 'You must validate that you are over 18' ) )
->addElement ( 'checkbox', 'promotions', array ('required' => true, 'label' => 'I agree NOT to send any email promotions promoting this web site', 'invalidMessage' => 'You must validate that you are over 18' ) )
->addElement ( 'checkbox', 'terms', array ('required' => true, 'label' => 'I agree to the Terms & Conditions', 'invalidMessage' => 'You must validate that you are over 18' ) );

$form = new Zend_Dojo_Form ( );
$form->setMethod ( 'post' )->setAction ( "/signup/process" )->setName ( 'signup' );

Alert you suggested me to make wont work as well :(
phtml:
<? $this->dojo()->javascriptCaptureStart() ?>
function validateForm() {
    var form = dijit.byId("signup");
    if (!form.validate()) {
        alert("Invalid form");
        return false;
    }
    return true;
}
<? $this->dojo()->javascriptCaptureEnd() ?>
<? $this->dojo()->onLoadCaptureStart() ?>
function () {
    dojo.connect(dijit.byId("signup"), "onSubmit", "validateForm");
}
<? $this->dojo()->onLoadCaptureEnd() ?>
<div class="signupForm">

<?= $this->form ?>
</div>


Thanks,
Vladimir

[gerardroche]

vladimirn wrote:

Alert you suggested me to make wont work as well :(
phtml:
<? $this->dojo()->javascriptCaptureStart() ?>
function validateForm() {
    var form = dijit.byId("signup");
    if (!form.validate()) {
        alert("Invalid form");
        return false;
    }
    return true;
}
<? $this->dojo()->javascriptCaptureEnd() ?>
<? $this->dojo()->onLoadCaptureStart() ?>
function () {
    dojo.connect(dijit.byId("signup"), "onSubmit", "validateForm");
}
<? $this->dojo()->onLoadCaptureEnd() ?>
<div class="signupForm">

<?= $this->form ?>
</div>


Thanks,
Vladimir

Hi, there's a typo in the above, the javascript should be:


dojo.addOnLoad(function () {
    dojo.connect(dijit.byId("<form id>"), "onSubmit", "validateForm");
});


function validateForm() {
    var form = dijit.byId("<form id>");
    if (form.validate()) {
        alert("Invalid form");
        return false;
    }
    return true;
}



Is there a way to get Zend_Dojo_Form to do this for all forms automatically?

[gerardroche]

vladimirn wrote:

Alert you suggested me to make wont work as well :(
phtml:
<? $this->dojo()->javascriptCaptureStart() ?>
function validateForm() {
    var form = dijit.byId("signup");
    if (!form.validate()) {
        alert("Invalid form");
        return false;
    }
    return true;
}
<? $this->dojo()->javascriptCaptureEnd() ?>
<? $this->dojo()->onLoadCaptureStart() ?>
function () {
    dojo.connect(dijit.byId("signup"), "onSubmit", "validateForm");
}
<? $this->dojo()->onLoadCaptureEnd() ?>
<div class="signupForm">

<?= $this->form ?>
</div>
Thanks,
Vladimir

Sorry, you're right, this doesn't work.


The javascript works if you do the following, i.e. paste it in After the dojo helper is echoed:

<?php echo $this->dojo()->addStylesheetModule('dijit.themes.tundra'); ?>
           
<script type="text/javascript">
//<![CDATA[
dojo.addOnLoad(function () {
    dojo.connect(dijit.byId("<form id>"), "onSubmit", "validateForm");
    }
);
function validateForm() {
    var form = dijit.byId("<form id>");
    if (form.validate()) {
        alert("Invalid form");
        return false;
    }
    return true;
}
//]]>

</script>

That'll work, but when you capture it it doesn't. Bug?

This is the javascript produced if you capture it via the dojo helper:


<script type="text/javascript">
//<![CDATA[
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.Form");
dojo.require("dojo.parser");
dojo.addOnLoad(function () {
    dojo.connect(dijit.byId("<form id>"), "onSubmit", "validateForm");}
 );
 
dojo.addOnLoad(function() {
    dojo.forEach(zendDijits, function(info) {
        var n = dojo.byId(info.id);
        if (null != n) {
            dojo.attr(n, dojo.mixin({ id: info.id }, info.params));
        }
    });
    dojo.parser.parse();
});
function validateForm() {
    var form = dijit.byId("<form id>");
    if (!form.validate()) {
        alert("Invalid form");
        return false;
    }
    return true;
}
var zendDijits = [{"id":"name","params":{"invalidMessage":"Required","trim":"true","required":"true","dojoType":"dijit.form.ValidationTextBox"}},{"id":"submit","params":{"label":"Save","dojoType":"dijit.form.Button"}},{"id":"clubForm","params":{"dojoType":"dijit.form.Form"}}];
//]]>

</script>    

[drj201]

I confirm this does not work using capture... I have the same problem.

Thanks

gerardroche wrote:

vladimirn wrote:

Alert you suggested me to make wont work as well :(
phtml:
<? $this->dojo()->javascriptCaptureStart() ?>
function validateForm() {
    var form = dijit.byId("signup");
    if (!form.validate()) {
        alert("Invalid form");
        return false;
    }
    return true;
}
<? $this->dojo()->javascriptCaptureEnd() ?>
<? $this->dojo()->onLoadCaptureStart() ?>
function () {
    dojo.connect(dijit.byId("signup"), "onSubmit", "validateForm");
}
<? $this->dojo()->onLoadCaptureEnd() ?>
<div class="signupForm">

<?= $this->form ?>
</div>
Thanks,
Vladimir

Sorry, you're right, this doesn't work.


The javascript works if you do the following, i.e. paste it in After the dojo helper is echoed:

<?php echo $this->dojo()->addStylesheetModule('dijit.themes.tundra'); ?>
           
<script type="text/javascript">
//<![CDATA[
dojo.addOnLoad(function () {
    dojo.connect(dijit.byId("<form id>"), "onSubmit", "validateForm");
    }
);
function validateForm() {
    var form = dijit.byId("<form id>");
    if (form.validate()) {
        alert("Invalid form");
        return false;
    }
    return true;
}
//]]>

</script>

That'll work, but when you capture it it doesn't. Bug?

This is the javascript produced if you capture it via the dojo helper:


<script type="text/javascript">
//<![CDATA[
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.Form");
dojo.require("dojo.parser");
dojo.addOnLoad(function () {
    dojo.connect(dijit.byId("<form id>"), "onSubmit", "validateForm");}
 );
 
dojo.addOnLoad(function() {
    dojo.forEach(zendDijits, function(info) {
        var n = dojo.byId(info.id);
        if (null != n) {
            dojo.attr(n, dojo.mixin({ id: info.id }, info.params));
        }
    });
    dojo.parser.parse();
});
function validateForm() {
    var form = dijit.byId("<form id>");
    if (!form.validate()) {
        alert("Invalid form");
        return false;
    }
    return true;
}
var zendDijits = [{"id":"name","params":{"invalidMessage":"Required","trim":"true","required":"true","dojoType":"dijit.form.ValidationTextBox"}},{"id":"submit","params":{"label":"Save","dojoType":"dijit.form.Button"}},{"id":"clubForm","params":{"dojoType":"dijit.form.Form"}}];
//]]>

</script>    

[vladimirn]

There was a few members pointing that this wont work, and i dont have it worked yet. Any new ideas?

drj201 wrote:

I confirm this does not work using capture... I have the same problem.

Thanks

gerardroche wrote:

vladimirn wrote:

Alert you suggested me to make wont work as well :(
phtml:
<? $this->dojo()->javascriptCaptureStart() ?>
function validateForm() {
    var form = dijit.byId("signup");
    if (!form.validate()) {
        alert("Invalid form");
        return false;
    }
    return true;
}
<? $this->dojo()->javascriptCaptureEnd() ?>
<? $this->dojo()->onLoadCaptureStart() ?>
function () {
    dojo.connect(dijit.byId("signup"), "onSubmit", "validateForm");
}
<? $this->dojo()->onLoadCaptureEnd() ?>
<div class="signupForm">

<?= $this->form ?>
</div>
Thanks,
Vladimir

Sorry, you're right, this doesn't work.


The javascript works if you do the following, i.e. paste it in After the dojo helper is echoed:

<?php echo $this->dojo()->addStylesheetModule('dijit.themes.tundra'); ?>
           
<script type="text/javascript">
//<![CDATA[
dojo.addOnLoad(function () {
    dojo.connect(dijit.byId("<form id>"), "onSubmit", "validateForm");
    }
);
function validateForm() {
    var form = dijit.byId("<form id>");
    if (form.validate()) {
        alert("Invalid form");
        return false;
    }
    return true;
}
//]]>

</script>

That'll work, but when you capture it it doesn't. Bug?

This is the javascript produced if you capture it via the dojo helper:


<script type="text/javascript">
//<![CDATA[
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.Form");
dojo.require("dojo.parser");
dojo.addOnLoad(function () {
    dojo.connect(dijit.byId("<form id>"), "onSubmit", "validateForm");}
 );
 
dojo.addOnLoad(function() {
    dojo.forEach(zendDijits, function(info) {
        var n = dojo.byId(info.id);
        if (null != n) {
            dojo.attr(n, dojo.mixin({ id: info.id }, info.params));
        }
    });
    dojo.parser.parse();
});
function validateForm() {
    var form = dijit.byId("<form id>");
    if (!form.validate()) {
        alert("Invalid form");
        return false;
    }
    return true;
}
var zendDijits = [{"id":"name","params":{"invalidMessage":"Required","trim":"true","required":"true","dojoType":"dijit.form.ValidationTextBox"}},{"id":"submit","params":{"label":"Save","dojoType":"dijit.form.Button"}},{"id":"clubForm","params":{"dojoType":"dijit.form.Form"}}];
//]]>

</script>