jQuery仅在验证后执行动画

Question

我正在构建一个在后台带有验证和 AJAX 请求的 Web 表单，它是一个页面上的多个表单，中间有动画。我的问题是我希望提交按钮仅在所有验证正确后执行动画。

//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>

Answer 1

您的验证结构可能需要做一些工作。

您可以使用验证插件来验证表单中的所有字段，而不是验证它自己的函数中的每个字段：

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

以上是一个粗略的示例，请查看documentation 以获取更多信息和示例。

设置验证规则后，您可以对表单是否有效应用逻辑，如下所示：

$('#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();
});