#Solution
<script type="text/javascript">
//<![CDATA[
var contactForm = new VarienForm('contactForm', true);
jQuery('#contactForm').submit(function(){
console.log('submitted');
jQuery(document).foundation('equalizer', 'reflow');
});
//]]>
</script>
Difference here is, you are now listening to the event submit()
instead of click()
. Due to this your jquery function will be triggered after validations are carried out by VarienForm
.
#Why does it so ?
See VarienForm
declaration in js/varien/form.js
.
VarienForm = Class.create();
VarienForm.prototype = {
initialize: function(formId, firstFieldFocus){
this.form = $(formId);
if (!this.form) {
return;
}
this.cache = $A();
this.currLoader = false;
this.currDataIndex = false;
this.validator = new Validation(this.form);
this.elementFocus = this.elementOnFocus.bindAsEventListener(this);
this.elementBlur = this.elementOnBlur.bindAsEventListener(this);
this.childLoader = this.onChangeChildLoad.bindAsEventListener(this);
this.highlightClass = 'highlight';
this.extraChildParams = '';
this.firstFieldFocus= firstFieldFocus || false;
this.bindElements();
if(this.firstFieldFocus){
try{
Form.Element.focus(Form.findFirstElement(this.form))
}
catch(e){}
}
},
submit : function(url){
if(this.validator && this.validator.validate()){
this.form.submit();
}
return false;
},
...
}
You can see above that Validator
is called inside the function submit
. This means VarienForm
validation is bind to the event submit
.
In your case, you are using click()
event on button, which will be fired before submit()
event on form. This is why it is not working in your scenario.
In my solution, we are using form submit event and which is loaded after varien form call. Due to this, jquery submit call will be fired only after VarienFrom
has done.