javascript - 验证按钮后提交表单必须点击两次

Question

我无权访问 php 文件，因此我必须使用 JavaScript 进行验证。我决定使用 jQuery。我这样做:

$(document).ready(function(){
    $('#targetForm').submit(function(e){
        e.preventDefault();
        closeOpenBoxes();
    });
});
function closeOpenBoxes(){
    if($('.missingBox:visible').length > 0){
        $('.missingBox:visible').slideUp('fast', function(){
            validateForm();
        });
    }
    else{
        validateForm();
    }
}
function validateForm(){
    if($('#first_name').val() == ''){
        $('#firstNameBox').slideDown();
    }
    else{
        if($('#last_name').val() == ''){
            $('#lastNameBox').slideDown();
        }
        else{
            if($('#company').val() == ''){
                $('#companyBox').slideDown();
            }
            else{
                if($('#country').val() == ''){
                    $('#countryBox').slideDown();
                }
                else{
                    if($('#email').val() == ''){
                        $('#emailBox').slideDown();
                    }
                    else{
                        $('#targetForm').unbind();
                        $('#targetForm').submit();                  
                    }
                }
            }
        }
    }



}

它可以工作，但是要使表单在验证后实际提交，您必须点击提交按钮两次。我尝试了一些不同的方法，例如在函数末尾添加 return true ，甚至在提交上设置超时，以便 e.preventDefault() 之前完全解除绑定(bind)submit 会在这样的验证后触发，但它仍然不起作用:

$('#targetForm').unbind();
setTimeout(function(){$('#targetForm').submit()},1000);

我做了一个 fiddle :http://jsfiddle.net/uXg3R/1/我不确定我错过了什么任何帮助都会很棒

Answer 1

您忘记了目标表单上的“if”。而不是

    $(document).ready(function(){
    $('#targetForm').submit(function(e){
        e.preventDefault();
        closeOpenBoxes();
    });
});
function closeOpenBoxes(){
    if($('.missingBox:visible').length > 0){
        $('.missingBox:visible').slideUp('fast', function(){
            validateForm();
        });
    }
    else{
        validateForm();
    }
}
function validateForm(){
    if($('#first_name').val() == ''){
        $('#firstNameBox').slideDown();
    }
    else{
        if($('#last_name').val() == ''){
            $('#lastNameBox').slideDown();
        }
        else{
            if($('#company').val() == ''){
                $('#companyBox').slideDown();
            }
            else{
                if($('#country').val() == ''){
                    $('#countryBox').slideDown();
                }
                else{
                    if($('#email').val() == ''){
                        $('#emailBox').slideDown();
                    }
                    else{
                        $('#targetForm').unbind();
                        $('#targetForm').submit();                  
                    }
                }
            }
        }
    }



}

使用

 $(document).ready(function(){
        $('#targetForm').submit(function(e){
            e.preventDefault();
            closeOpenBoxes();
        });
    });
    function closeOpenBoxes(){
        if($('.missingBox:visible').length > 0){
            $('.missingBox:visible').slideUp('fast', function(){
                validateForm();
            });
        }
        else{
            validateForm();
        }
    }
    function validateForm(){
        if($('#first_name').val() == ''){
            $('#firstNameBox').slideDown();
        }
        else{
            if($('#last_name').val() == ''){
                $('#lastNameBox').slideDown();
            }
            else{
                if($('#company').val() == ''){
                    $('#companyBox').slideDown();
                }
                else{
                    if($('#country').val() == ''){
                        $('#countryBox').slideDown();
                    }
                    else{
                        if($('#email').val() == ''){
                            $('#emailBox').slideDown();
                        }
                        else{
                           if $('#targetForm').unbind();
                            $('#targetForm').submit();                  
                        }
                    }
                }
            }
        }



    }