0

Onsubmit I want to fire fancybox popup

I need only to show the fancybox popup once form is VALIDATED (JQUERY Validate used)

It seems to popup the fancybox popup only when the form is not filled in correctly!

http://gloss-hair.com/old/owl/OWLFORM.html

I am not sure how to load the popup fancybox function only once the form is validated:

  <script type="text/javascript">
$().ready(function() {
    // validate the competition form when it is submitted
    $("#ie9_competition").validate({
        errorPlacement: function (error, element) {   
            if ( element.is(":checkbox") ) {
                error.appendTo( element.closest('div') );
               }
            else { 
                error.insertAfter(element.parent().find("label"));           
                 }
            },
        rules: {            
            sEmail: {
                required: true,
                email: true
            },

        }
    });         
}); 

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox4").fancybox({
            'hideOnContentClick': true
        });
    });
</script>
0

2 Answers 2

2

jQuery Validation plugin lets you define submitHandler which executes if a form is valid:

submitHandler: function(form){
  form.submit(); // submit the form
  // code to show your fancybox here
}

Your validate() code will look like this:

$("#ie9_competition").validate({
 errorPlacement: function (error, element) {   
  if ( element.is(":checkbox") ) {
   error.appendTo( element.closest('div') );
  } else { 
   error.insertAfter(element.parent().find("label"));           
  }
 },
 rules: {            
  sEmail: {
   required: true,
   email: true
  }
 },
 submitHandler: function(form){
  form.submit(); // submit the form
  // code to show your fancybox here
 }
});

You can see all available options for validate() method here: http://docs.jquery.com/Plugins/Validation/validate#toptions

5
  • Hi thanks for your reply - How do i add this to my validate script
    – Jai
    Commented Apr 9, 2012 at 20:16
  • The same way you have the rules: and errorPlacement: options in there. submitHandler is just another option like those ones.
    – azawaza
    Commented Apr 10, 2012 at 2:47
  • PS: I have edited my answer above to include example of full validate() code with submitHandler option added in.
    – azawaza
    Commented Apr 10, 2012 at 2:54
  • Again thanks - this is great - as commented above I put it in the function but was getting some errors with syntax ... thanks again for all your help .... great site and super helpful cheers J
    – Jai
    Commented Apr 10, 2012 at 8:20
  • Hi Azawaza Thanks again that is awesome - just wondering if you have any thoughts also on the issue I have whereby once form is validated and I click on the submit button, the form needs to clear all fields (as well as open up fancybox popup which works a treat) Cheers again :)
    – Jai
    Commented Apr 11, 2012 at 17:54
1

Try like this

$().ready(function() {
        // validate the competition form when it is submitted
        $("#ie9_competition").validate({
            errorPlacement: function (error, element) {   
                if ( element.is(":checkbox") ) {
                    error.appendTo( element.closest('div') );
                   }
                else { 
                    error.insertAfter(element.parent().find("label"));           
                     }
                },
            rules: {            
                sEmail: {
                    required: true,
                    email: true
                },

            },          
            submitHandler: function(form){

                jQuery('.fancybox4').trigger('click');

            }
        });         
    }); 

Then remove the onsubmit event from form tag. So your form tag is like

<form id="ie9_competition" method="post">
3
  • Thats great thanks this works a treat - I initially added it in as above - but I had some syntax issues (bracket or something missing). Awesome cheers again
    – Jai
    Commented Apr 10, 2012 at 8:16
  • Hmmm onsubmit also needs to clear the form (as well as popup the fancybox message which works). Would you know how i can clear the form once validated and onsubmit goes forward - thanks again in advance
    – Jai
    Commented Apr 11, 2012 at 17:51
  • @JaimieLisaStow : You can use "resetForm" to reset the validation error messages and may be have to clear all the field values.
    – Mahesh KP
    Commented Apr 12, 2012 at 3:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.