jQuery，否则，如果不起作用

Question

我正在使用.ajax将数据发送到数据库。 我有两个领域。 我想检查其中一个是否为空，如果显示为错误。 第一个如果工作正常。 该消息显示，但else if不显示。 我可能是什么问题？ 我对javascript和iquery不太熟悉。

$.ajax({
    type: "POST",
    url: "submit.php",
    data: data,
    cache: false,
     beforeSend: function() {
        if (!$.trim($("#cat").val())) {
            $(".fb-error").css( "display", "block" );
            $(".fb-error").html("<p>the cat field is empty</p>");
            xhr.abort();
        }

        else if (!$.trim($("#box").val())) {
            $(".fb-error").css( "display", "block" );
            $(".fb-error").html("<p>the box field is empty</p>");
            xhr.abort();
        }
    },
    success: function(html){
        $('textarea#box').val('');
        $("#box-wrap").prepend(html);
    }
});

Answer 1

如果要同时检查这两个条件，则不能使用else 。

var error = '';

if (!$.trim($("#cat").val())) {
        error = "<p>the cat field is empty</p>";
}

if (!$.trim($("#box").val())) {
        error += "<p>the box field is empty</p>";
}

if (error) {
        $(".fb-error").html(error);
        $(".fb-error").css( "display", "block" );
        xhr.abort();
}

第二， if您必须附加新的html，以防止覆盖已添加的消息。

Answer 2

对每个条件使用单独的if语句； else if仅在第一个if失败时运行。 使用变量来累积消息。

 beforeSend: function() {
    var msg = '';
    if (!$.trim($("#cat").val())) {
        $(".fb-error").css( "display", "block" );
        msg = "<p>the cat field is empty</p>";
        xhr.abort();
    }
    if (!$.trim($("#box").val())) {
        $(".fb-error").css( "display", "block" );
        msg += "<p>the box field is empty</p>";
        xhr.abort();
    }
    $(".fb-error").html(msg);
},

Answer 3

我将错误放入数组中，如果不为空，则显示它们

var errors = [];
if (!$.trim($("#cat").val())) {
    errors.push("<p>the cat field is empty</p>");
}

if (!$.trim($("#box").val())) {
    errors.push("<p>the box field is empty</p>");
}

if(errors.length){
    $(".fb-error").css( "display", "block" ).html(errors.join(''));
    xhr.abort();
}

Answer 4

合并：

var error = false;
if (!$.trim($("#cat").val())) {
        $(".fb-error").append("<p>the cat field is empty</p>");
        error = true;
}

if (!$.trim($("#box").val())) {
        $(".fb-error").append("<p>the box field is empty</p>");
        error = true;
}

if (error) {
        xhr.abort();
        $(".fb-error").css( "display", "block" );
}

Answer 5

要调试，您可以在#box和#cat之间切换吗？

您正在使用else，因此如果#cat为空，则不会看到“框字段为空”的消息。 仅当#cat不为空，而#box为空时，才显示此消息。

将#box更改为您知道的不存在（并且不存在）的内容。 也许其中有一个价值。

您可以将#cat和#box的值输出到控制台以确保它们为空。

console.log（“ $。trim（$（”＃cat“）。val（）=” + $。trim（$（“＃cat”）。val（））; console.log（“ $。trim（$ （“ #box”）。val（）=“ + $。trim（$（”＃box“）。val（））;