javascript - 如果当前选项卡有空字段，则阻止下一个选项卡

Question

我有一个表单，其中设置了几个问题，每个问题一次显示(如幻灯片)。如果当前组有空字段，我想阻止下一组。下面是我的脚本，用于浏览每个问题集。任何帮助将不胜感激。

$(document).ready(function() {

var $questions = $('#questions .question');
var currentQuestion = $('#questions .question.active').index();

$('#next').click(function() {
    $($questions[currentQuestion]).slideUp(function() {
        currentQuestion++;
        if (currentQuestion == $questions.length - 1) {
            $('#next').css('display', 'none');
            $('#submit').css('display', 'inline');
        }else{
            $('#next').css('display', 'inline');
            $('#submit').css('display', 'none');
        }
        $('#back').css('display', 'inline');
        $($questions[currentQuestion]).slideDown();
    });
}); 

$('#back').click(function() {
    $($questions[currentQuestion]).slideUp(function() {
        currentQuestion--;
        if (currentQuestion == 0) {
            $('#back').css('display', 'none');
        } else {
            $('#back').css('display', 'inline');
        }
        $('#next').css('display', 'inline');
        $('#submit').css('display', 'none');
        $($questions[currentQuestion]).slideDown();
    });
});

});

这是我的 JSFiddle

Answer 1

我遇到了你的问题并决定 fork 你的 fiddle 。

您应该创建一个函数来检查您的条件，然后再继续下一个选项卡。
在您的情况下，条件为:必须填写所有字段

我添加了这个函数来检查事件部分并返回 true/false，以便继续。

function validateFormSection() {
    var valid = true; //As long as it's true, we may continue
    var section = $('.question.active'); //Find the active section
    var inputs = section.find('input'); //Get all its inputs
    inputs.each(function(index, el) {
        if ( $(el).val() == "" ) {
            valid = false;
        }
    });
    return valid;
}

JSFiddle here

在第三页上，无论所有字段是否为空，表单都会提交。
您可以通过连接提交函数并检查空字段来防止这种情况。
如果它们为空，我们使用 e.preventDefault(); 来阻止其提交。
如果它们已填满，我们只需通过执行 $('form').submit();

来提交

$('form').submit( function (e) { //Hook into the submit event
    var valid = validateFormSection(); //Check if our fields are filled
    if ( valid ) { //They are filled?
        $('form').submit(); //Very well, let's submit!
    } else {
        e.preventDefault(); //If not, prevent the (default) submit behaviour
    }
});

fiddle 已被编辑以反射(reflect)这些更改。