javascript - 在所有输入字段上使用 jquery 进行错误验证仅检查一次

Question

我有一堆具有相同类名的输入字段，并为每个输入字段分配了一个自定义数据变量。自定义变量的目的是用于稍后识别输入值并将其分配给另一个 JS 对象。

代码看起来像这样。

function moveStepOnetoStepTwo(){

//Go thru each item id input field
$('.inputfields').each(function(){
    var attr_userid = $(this).data('userid'); //get item ID from custom data attr val
    var attr_final_bid = $(this).val();

    //Let's do some error checks with input
    attr_final_bid = attr_final_bid.trim();
    if(empty(attr_final_bid) == true){
        $(this).css({"border-color": "red",
                    "border-width":"2px",
                    "border-style":"solid"});
        //Alert the user
        alert("Please enter a valid value before proceeding to Step 2");
        return false;
    }
    else{

        //Go thru the master list
        $.each(item_checkout_master_list, function(){
            if(this.itemID == attr_userid){
                this.final_bid = attr_final_bid;
            }
        });

        console.log(item_checkout_master_list);
        //if pass move to tab 2
        $('#tab1_box').hide();
        $('#tab3_box').hide();
        $('#tab2_box').show();
        $('#myTab li:eq(1) a').tab('show');
    }
});
}

出于某种奇怪的原因，它只进行一次错误检查，并且如果我再次调用函数 moveStepOnetoStepTwo() 。即使另一个输入字段为空，它仍然会继续执行 else 操作。

对此的任何帮助将不胜感激!谢谢。

Answer 1

也许创建一个单独的验证方法更好。

所以你会得到这样的东西

function moveStepOnetoStepTwo() {

    if (!validateInput()) {
        console.log("wrong input");
        alert("bad input");
        return
    }

    //continue to move to step 2
    //Go thru the master list
    $.each(item_checkout_master_list, function() {
        if (this.itemID == attr_userid) {
            this.final_bid = attr_final_bid;
        }
    });

    console.log(item_checkout_master_list);
    //if pass move to tab 2
    $('#tab1_box').hide();
    $('#tab3_box').hide();
    $('#tab2_box').show();
    $('#myTab li:eq(1) a').tab('show');
}

function validateInput() {

    var validateOk = true;

    $('.inputfields').each(function() {
        var attr_userid = $(this).data('userid'); //get item ID from custom data attr val
        var attr_final_bid = $(this).val();

        //Let's do some error checks with input
        attr_final_bid = attr_final_bid.trim();
        if (empty(attr_final_bid) == true) {
            $(this).css({
                "border-color": "red",
                "border-width": "2px",
                "border-style": "solid"
            });
            validateOk = false;
        }
    });

    return validateOk;
}