ZF-11953: Firefox/Chrome prevent form submit with DOJO 1.7.1

Description

Affected Browsers: Firefix & Chrome (latest) Working Browsers: IE & Safari (latest)

a simple input box is created as component od a zend_dojo_form, but the 2 browsers won't submit the form because the text boxes are empty. setrequired is set to false ...

Comments

I also had this issue, it happens because Firefox/Chrome handles the required="false" attribute that Dojo adds to the elements as HTML5, thus making the fields required. I did a workaround by adding a "novalidate" attribute to the form.

This is not a Zend Framework issue, but an incompatibility between those browsers and Dojo (specifically it's use of element attributes to store state information)

The problem is that when Dojo parse page's Dijits, it sometimes adds the required="true" or required="false" attribute on some of the form's elements. Since this attribute doesn't exists in HTML4 nor in XHTML1, new browsers (like Firefox or Chrome) is using the attribute in its HTML5 form, discarding the "true" or "false" value. So the form needs to have all the Dijits with the attribute "required" to be filled to be submitted.

I've written 2 workarounds (one solution, not both at the same time). 1. Modify the Zend Framework files to create HTML5 valid attributes. Add this just before "dojo.attr(n, dojo.mixin({ id: info.id }, info.params));" in Zend/Dojo/View/Helper/Dojo/Container.php : for (var p in info.params) { if ((p == 'required') && (info.params[p] == 'true')) { info.params[p] = ''; } else if ((p == 'required') && (info.params[p] == 'false')) { delete info.params[p]; } }

  1. Add a JavaScript that removes all HTML attributes "required" on Dijits. Add this in your view (or directly in the layout, after Dojo resources) : dojo.addOnLoad(function() { if(typeof(zendDijits) != "undefined"){ dojo.forEach(zendDijits, function(info) { var n = dojo.byId(info.id); if (null != n) { dojo.removeAttr(n, 'required'); } }); } });