jQuery가 유효성 검사 후에 만 ​​애니메이션을 실행합니다.

Question

백그라운드에서 유효성 검사 및 AJAX 요청을 사용하여 웹 양식을 작성하고 있습니다. 한 페이지에 여러 양식이 있고 그 사이에 애니메이션이 있습니다. 내 문제는 모든 유효성 검사가 완료된 후에 제출 단추가 애니메이션을 실행하기를 원합니다.

//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(); 
}); 

희망을.