Is there a callback I can use after a form has been validated?

Question

I have to reflow the Foundation equalizer on a page that contains a form [contact page] - if validation failsthe form will overlap the footer with the added validation error elements.

<script type="text/javascript">
//<![CDATA[

    var contactForm = new VarienForm('contactForm', true);

    jQuery('#contact-submit').click(function(){
        console.log('submitted');
        jQuery(document).foundation('equalizer', 'reflow');
    });

//]]>
</script>

Obviously this only works after the submit button is clicked a second time.

Is there a callback function [or something] I can use after Magento have validated the form to call the Foundation reflow?

UPDATE

According to some different docs here and there, I'm supposed to be able to do something like this:

<script type="text/javascript">
//<![CDATA[
    var contactForm = new VarienForm('contactForm', {onFormValidate: myCallback, immediate : true});

    function myCallback(result, form) {
        console.log('callback = ' + result);
    }
//]]>
</script>

It will validate the form, but does not fire the callback OR validate immediately....

Answer 1

Yes you can validate your form explicitly and based on the status of the validation (success/failed) you can roll out your own callback actions. Hope am understanding you correctly and pointing you to the right direction.

<script type="text/javascript">
//<![CDATA[

    var contactForm = new VarienForm('contactForm', true);
    if (contactForm .validator.validate()){
        alert("Contact form is submitted and Validation Passed !"); //i love alerts more than console.log() as it works on all the browsers and versions
    }else{
        alert("Contact form is submitted and Validation Failed !");   
        jQuery(document).foundation('equalizer', 'reflow'); // assumed you have jQuery.noConflict(); before you call jQuery
    } 

//]]>
</script>

Answer 2

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.

Answer 3

var contactForm = new VarienForm('contactForm', true);
$('contactForm').onsubmit = function () {
      if (contactForm.validator.validate()) {
          alert('submited');
          return false;
      }
 };

Answer 4

Take a look at the product detail page

    var productAddToCartForm = new VarienForm('product_addtocart_form');
    productAddToCartForm.submit = function(button, url) {
        if (this.validator.validate()) {

            var form = this.form;

            var e = null;
            try {
                this.form.submit();
            } catch (e) {
            }

            if (e) {
                throw e;
            }
        }

        else{
            productOptionError();
        }
    }.bind(productAddToCartForm);

Answer 5

I just got success with this method in the newsletter subscription form. But this will work with other forms as well.

 var newsletterSubscriberFormDetail = new VarienForm('newsletter-validate-detail'); // to validate

 function processForm(e) {
    if (e.preventDefault) e.preventDefault();

      if (newsletterSubscriberFormDetail.validator.validate()) {
         // Here comes my ajax fucntion to subscribe
      }

     // You must return false to prevent the default form behavior
     return false;
 }

 var form = document.getElementById('newsletter-validate-detail');
 if (form.attachEvent) {
    form.attachEvent("submit", processForm);
 } else {
    form.addEventListener("submit", processForm);
 }