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()在验证之后submit之前完全取消绑定这仍然无效：

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

我做了一个小提琴：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();                  
                        }
                    }
                }
            }
        }



    }

Answer 2

如果表单有效，请让您的提交操作返回true或false。

$(document).ready(function () {
    $('#targetForm').submit(function (e) {
        return closeOpenBoxes();
    });
});

function closeOpenBoxes() {
    $('.missingBox:visible').slideUp('fast');
    return validateForm();
}

在你的validateForm中：

.....
if ($('#email').val() == '') {
    $('#emailBox').slideDown();
} else {
    return true;
}

http://jsfiddle.net/uXg3R/1/

Answer 3

删除e.preventDefault（）;如果val为空或未完成，则从您的提交函数和validateForm函数返回false并替换以下代码：

$('#targetForm').unbind();
$('#targetForm').submit();

通过 return true;

Answer 4

这是一个更新的JFiddle，正确的代码，正常工作http://jsfiddle.net/uXg3R/7/

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

}

只需在$（'targetForm'）前面的代码底部添加if语句.unbind（）;

Answer 5

我能够让这个工作的唯一方法是制作两个表格，一个隐藏，一个可见，这个可笑的重复JS。

<form id="targetForm">
    <input id="first_name" name="first_name" type="hidden" />
</form>

<form id="visibleForm" name="visibleForm">
    <label for="first_nameVisible">First Name<span class="required">*</span></label><br />
    <input id="first_nameVisible" class="textInput" maxlength="40" name="first_nameVisible" size="20" type="text" /><br />
    <div class="missingBox" id="firstNameBox">
        First Name is Required!
    </div>
</form>

我的JS：

 $('#submitBtn').click(function (e) {
        e.preventDefault();
        if ($('.missingBox:visible').length > 0) {
            $('.missingBox:visible').slideUp('fast', function () {
                if ($('#first_nameVisible').val() == '') {
                    $('#firstNameBox').slideDown();
                } else {
                    $('#first_name').val($('#first_nameVisible').val());
                    setTimeout(function(){$('#targetForm').submit()},700);
                }
            });
        }
        else{
             $('#first_name').val($('#first_nameVisible').val());
             setTimeout(function(){$('#targetForm').submit()},700);
        }
    });

在验证按钮必须被击中两次后提交表单

5 个答案: