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

时间:2014-12-08 16:48:28

标签: javascript jquery html html5

我有一堆输入字段,它们具有相同的类名和分配给每个字段的自定义数据变量。自定义变量的用途是用于稍后识别并将输入值分配给另一个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操作。

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

1 个答案:

答案 0 :(得分: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;
}