jQuery to execute animation only after validation

Question

I'm building a web form with validation and AJAX requests in the background it's multiple forms on one page with animations in between. My problem is I want the submit button only to execute the animation after all of the validation is correct.

//jQuery ANIMATION
$("#submit1").click(function(){
  $("#initial_form").animate({"left": "-=750px",opacity: 0.25,}) .fadeOut(1);
   $("#ipad_congratulations").delay(500) .fadeIn("slow");
});

//VALIDATION
 <script type="text/javascript">
        /* <![CDATA[ */
        jQuery(function(){
            jQuery("#firstname").validate({
                expression: "if (VAL) return true; else return false;",
                message: "<br /> First name please."
            });
            jQuery("#lastname").validate({
                expression: "if (VAL) return true; else return false;",
                message: "<br />Last name too."
            });
            jQuery("#ValidNumber").validate({
                expression: "if (!isNaN(VAL) && VAL) return true; else return false;",
                message: "Please enter a valid Zip Code"
            });
            jQuery("#ValidInteger").validate({
                expression: "if (VAL.match(/^[0-9]*$/) && VAL) return true; else return false;",
                message: "Please enter a valid integer"
            });
            jQuery("#ValidDate").validate({
                expression: "if (!isValidDate(parseInt(VAL.split('-')[2]), parseInt(VAL.split('-')[0]), parseInt(VAL.split('-')[1]))) return false; else return true;",
                message: "Please enter a valid Date"
            });
            jQuery("#usremail").validate({
                expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;",
                message: "<br />Please enter a valid Email Addres"
            });
            jQuery("#ValidPassword").validate({
                expression: "if (VAL.length > 5 && VAL) return true; else return false;",
                message: "Please enter a valid Password"
            });
            jQuery("#ValidConfirmPassword").validate({
                expression: "if ((VAL == jQuery('#ValidPassword').val()) && VAL) return true; else return false;",
                message: "Confirm password field doesn't match the password field"
            });
            jQuery("#ValidSelection").validate({
                expression: "if (VAL != '0') return true; else return false;",
                message: "Please make a selection"
            });
            jQuery("#ValidMultiSelection").validate({
                expression: "if (VAL) return true; else return false;",
                message: "Please make a selection"
            });
            jQuery("#ValidRadio").validate({
                expression: "if (isChecked(SelfID)) return true; else return false;",
                message: "Please select a radio button"
            });
            jQuery("#resident").validate({
                expression: "if (isChecked(SelfID)) return true; else return false;",
                message: ""
            });
            jQuery("#terms").validate({
                expression: "if (isChecked(SelfID)) return true; else return false;",
                message: ""
            });                
        });
        /* ]]> */
    </script>

 $(function(){
        $('#form').form({
            success:function(data){
                $.messager.alert('Info', data, 'info');
            }
        });
    });
    </script>

Nimantha · Accepted Answer · 2021-11-14 14:51:02Z

1

Your validation structure could use a little work.

Instead of validating each field in it's own function, you could use the validate plugin to validate all the fields in the form as follows:

$('#yourForm').validate({
    rules: {
        field1: required,
        field2: {
            required: true,
            email: true
        }
    },
    messages: {
        field1: 'Field 1 error message.',
        field2: 'Field 1 error message.'
    }
});

The above is a crude example, have a look at the documentation for more information and examples.

After you have set up your validation rules, you can then apply logic on whether the form is valid as follows:

$('#yourForm').submit(function(){
    
    // If the form is NOT valid, stop.
    if (!$('#yourForm').valid()) return false;

    // The form is valid, so play the animation
    // ...   $('#foo').animate();
});

edited Nov 14, 2021 at 14:51

Nimantha

6,5376 gold badges32 silver badges78 bronze badges

answered Jan 27, 2012 at 8:50

Labu

2,57230 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery to execute animation only after validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related