Question

作为一项规则，当我无法从所有其他来源获得解决方案时，我仅将其作为最后的手段发布。我一直在讨论这个问题一整天，考虑到一些similar问题的困境，我不太希望这次能得到答案。

这是我简单的javascript验证功能，单击按钮时会调用该功能。单击时按钮会将参数（“上一个”或“下一个”）传递给此函数。现在麻烦的是，这适用于我试过的所有主要桌面浏览器，包括IE-11和Firefox-26。但是，在ios和WP8上，此功能始终失败。在移动设备上单击（滑动）按钮时，没有任何反应（它应该显示警报或移动到下一个块）。这是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语句。我在使用http://www.javascriptlint.com/online_lint.php测试代码时知道了。

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

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

Javascript功能适用于桌面，在移动浏览器上失败

1 个答案: