Javascript 函数在桌面上有效，在移动浏览器上失败

Question

通常，当我无法从所有其他来源获得解决方案时，我在 SO 上发帖只是作为最后的手段。我一整天都在为这个问题摸不着头脑，并考虑一些similar的困境。问题，我不太希望这次能得到答案。

这是我简单的 javascript 验证函数，单击按钮时会调用该函数。单击按钮时，会将参数(“上一个”或“下一个”)传递给该函数。现在的问题是，这适用于我尝试过的所有主要桌面浏览器，包括 IE-11 和 Firefox-26。然而，在ios和WP8上，这个功能一直失败。在移动设备上单击(滑动)按钮时不会发生任何事情(它应该显示警报或移动到下一个 block )。下面是 javascript 函数的代码:

function validateForm(button){
    smand=mandatory_check();
    if (smand != ''){
        alert('The following fields are mandatory:\n\n' + smand);
        return;
    }        
    if (button=='next'){
        if (scr_curr == (scr_count)){
            smand=mandatory_check(true);
            if (smand != ''){
                alert('The following fields are mandatory:\n\n' + smand);
                return;
            }
            else
                $('#formLawsuit').submit();
        }
        else{
            $('#screen' + scr_curr).addClass('hidden');
            scr_curr+=1;
            $('#screen' + scr_curr).removeClass('hidden');              
            if (scr_curr>1)
                $('#btnPrev').removeClass('hidden');
            if (scr_curr==scr_count)
                showConfirm();
        }
    }
    else{
        $('#screen' + scr_curr).addClass('hidden');
        scr_curr-=1;
        $('#screen' + scr_curr).removeClass('hidden');
        if (scr_curr==1)
            $('#btnPrev').addClass('hidden');
    }
}
function mandatory_check(finale=false){
    var screen='';
    var s='';
    if (!finale)
        screen = '#screen' + scr_curr;
    else
        screen = '#formLawsuit';
    $(screen + ' .control-label').each(function(i) {
        var label = $(this).attr('id');
        var input = '#' + label.replace('label','input');
        //alert(input);
        if ($(input).hasClass('mandatory') && $(input).val()==''){
            s += label.replace('label','') + '\n';
        }
    }        
);
    return s;
}

这是两个调用此验证函数的无辜 html 按钮:

<div class="form-group">
    <div  style="margin-bottom:120px;" class="col-lg-offset-2 col-lg-6" >
        <button id="btnPrev" name="btnPrev" type="button" class="hidden btn btn-primary btn-lg" onclick="javascript:validateForm('previous')">Previous</button>
        <button id="btnSubmit" name="btnPrev" type="button" class="btn btn-primary btn-lg" onclick="javascript:validateForm('next')">Next</button>
    </div>
</div>

表单和按钮基于 twitter-bootstrap，尽管我认为这不会对此产生任何影响。

Answer 1

虽然我没有收到这个问题的现成解决方案，但我被指出了正确的方向(这一切都归功于@Reigel)。希望这个答案对将来寻找类似问题的人有所帮助。

我的 JavaScript 代码有很多错误。不幸的是，大多数桌面浏览器都太宽松，无法捕获这些，因此我们没有在测试中得到它们。首先，我有两个具有相同名称属性的按钮(我忘记在通常的复制粘贴过程中更改它们):

    <button id="btnPrev" name="btnPrev" type="button" class="hidden btn btn-primary btn-lg" onclick="javascript:validateForm('previous')">Previous</button>
    <button id="btnSubmit" name="btnPrev" type="button" class="btn btn-primary btn-lg" onclick="javascript:validateForm('next')">Next</button>

虽然大多数浏览器都宽松地允许这样做，但事实证明 WP8 上的 IE 不允许这样做。

另一个问题是我忘记在很多地方放置 if 语句 block 。当我使用 http://www.javascriptlint.com/online_lint.php 测试我的代码时我才知道.

        if (scr_curr>1)
            $('#btnPrev').removeClass('hidden');
        if (scr_curr==scr_count)
            showConfirm();

完成这些更改后，我的网络应用程序开始在 WP8 和 ios 浏览器上正常工作。