Disclaimer: The following is a jQuery-driven solution. This class can be modified to accomplish the same thing using Prototype, however it has only been written in jQuery syntax.
Hey there fellow Magento-ers,
Have you been spending countless hours scouring the internet for a solution to this odd problem, in Magento, where you use the built-in Prototype validation to validate your form and it does not? And by ‘does not [validate]‘ I mean that in Internet Explorer 7 AND 9 (of course) it manages to ‘validate’ your empty fields, when attempting to submit an empty form, and then immediately disregards this ‘validation’ and just submits the form anyway….
Annoying, right? Can’t seem to get around it, right?
Well, have no fear! I’ve already ruined my own life, productivity and sanity in order to bring you this very specific and (I think) simple solution. I wrote (with the help of my pal Tom Rosario) a little unobtrusive Class-based function to handle it!
Just to give you some background, and to ensure I’ve been as thorough as possible, I’d like to list the things I’ve already attempted and failed at. This includes both my own solutions and those suggested by experts on the web:
- Stopping the page from loading via the location and window object: simply doesn’t work
- Changing the version of prototype: messes up all kinds of things in Magento, namely, checkout…so don’t do it
- Using jQuery validation: same issue occurs
- Using the IE 7/IE 8 compatibility meta tag: should work, but I never had success with it
Now that we’ve covered some of my futile attempts, let me tell you what I know worked; putting a good, old-fashioned ‘ onsubmit=”return false” ‘ on the form itself. This, of course, is only half the work. You then need to remove this, once the validation is satisfied and only if all the required fields are filled. In my humble opinion, this is (currently) the best solution because we’re allowing the built-in validation to still do it’s thing, with an extra layer of validation to prevent any unwanted results. The best part of this is that it doesn’t negatively affect functionality in the other browsers (FF, Chrome, Safari), who weren’t experiencing this problem in the first place. [raised eyebrow]
So speaking of that extra layer, the approach is really quite simple; we prevent the form from submitting anything if all the fields with the ‘required’ classes are empty, then remove that constraint once they’re filled/validated. Prototype validation is still able to do it’s thing, and when it’s done, and all other aspects are satisfied, we go ahead and take the ‘return false’ off the form and let it submit. Pretty simple right? I’m surprised myself that it was that easy.
Here’s the Class:
/* FormValidator Fix for IE7 IE9: place this wherever you DOM loads a la jQuery or Prototype */ var ie7 = $j.browser.msie $j.browser.version==”7.0″; var ie9 = $j.browser.msie $j.browser.version==”9.0″; var FormValidator = function (form) { this.form = $j(form); this.required = form.find(‘.required-entry’); this.fieldsFilled = 0; this.setup(); }; FormValidator.prototype = { setup: function () { var self = this; this.required.blur(function () { self.onBlur(); }); this.form.submit(function () { self.onSubmit(); }); }, onBlur: function () { var self = this; if (this.fieldsFilled == this.required.length) { this.form.removeAttr(‘onsubmit’); return false; } else { this.required.each(function () { if ($j(this).val().length 0) { self.fieldsFilled++; } }); } }, onSubmit: function () { if (this.fieldsFilled == this.required.length) { this.form.submit(); return true; } } };
Here’s what you do to your form:
form action=”?php echo $this-getFormAction(); ?” id=”myForm” method=”post” onsubmit=”return false”
Here’s how you call the function:
script type=”text/javascript” var contactForm = new VarienForm(‘myForm’, true); //place this inline, after your form HTML. if (ie7 || ie9) { new FormValidator($j(‘#myForm’)); } /script
It’s really that simple kids. Please feel free to add a comment and let me know if this didn’t work for you, or if you’d like to add something.
This article originally appeared on Ecommerce trends, online retail news and opinion, user experience design : Our Blog : Alexander Interactive and has been republished with permission.
Find out how to syndicate your content with Business 2 Community.
