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

Ваша структура проверки может потребовать небольшой работы.

Вместо проверки каждого поля в его собственной функции, вы можете использовать плагин validate для проверки всех полей в форме следующим образом:

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

Выше приведен грубый пример, для получения дополнительной информации и примеров посмотрите документацию .

После того, как вы установили свои правила проверки, вы можете применить логику для определения правильности формы следующим образом:

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

Надеюсь, это поможет.