0

我有个问题。我将验证我的测试站点。所以我有 4 个要检查的输入字段。

我的检查工作，但我写了所有 4 个输入，但我收到了一个不是我想要的警报错误，因为我需要表单操作链接。

这是我的代码：

var pin1 = jQuery('#pin1').val();
    var pin2 = jQuery('#pin2').val();
    var pin3 = jQuery('#pin3').val();
    var pin4 = jQuery('#pin4').val();

    var pin = pin1 + pin2 + pin3 + pin4;

   $("input").keypress(function(event) {
        if (event.which == 13) {

            event.preventDefault();

           if(pin == ""){
                alert("Bitte füllen Sie alle Inputfelder aus");
            }else{
                $("form").submit();
            }



        }
    });

这里是我的测试站点：http://devauth.labscope.de/htmlapp/login.html? email=HTML5_APP_dmarkstaedter@iscope.de

4

5 回答 5

1

必须在事件处理程序上读取输入字段的值，在您的情况下，您正在读取pindom 就绪的值...这意味着它在pin字段中具有默认值，可能是空字符串

$("input").keypress(function(event) {
    if (event.which == 13) {
        var pin1 = jQuery('#pin1').val();
        var pin2 = jQuery('#pin2').val();
        var pin3 = jQuery('#pin3').val();
        var pin4 = jQuery('#pin4').val();
        var pin = pin1 + pin2 + pin3 + pin4;

        event.preventDefault();
        if(pin == ""){
            alert("Bitte füllen Sie alle Inputfelder aus");
        }else{
            $("form").submit();
        }
    }
});
于 2013-10-21T09:24:29.117 回答
0

您需要检查按键事件中的输入值，因为您正在检查 DOM 加载时的值，而不是按键时的值。

   $("input").keypress(function(event) {
        var pin1 = jQuery('#pin1').val();
        var pin2 = jQuery('#pin2').val();
        var pin3 = jQuery('#pin3').val();
        var pin4 = jQuery('#pin4').val();

        var pin = pin1 + pin2 + pin3 + pin4;


        if (event.which == 13) {

            event.preventDefault();

           if(pin == ""){
                alert("Bitte füllen Sie alle Inputfelder aus");
            }else{
                $("form").submit();
            }

        }
    });
于 2013-10-21T09:24:36.897 回答
0

您必须在按键功能中更新或创建输入值的变量。目前在页面加载时设置变量，因此当您按下回车时 pin 变量将始终为空。您想在按键完成后检查变量的内容。

$("input").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        var pin1 = jQuery('#pin1').val();
        var pin2 = jQuery('#pin2').val();
        var pin3 = jQuery('#pin3').val();
        var pin4 = jQuery('#pin4').val();
        var pin = pin1 + pin2 + pin3 + pin4;

        if(pin == ""){
            alert("Bitte füllen Sie alle Inputfelder aus");
        }else{
            $("form").submit();
        }
    }
});
于 2013-10-21T09:26:58.687 回答
0 
$("input").keypress(function (event) {
    if (event.which == 13) {
        event.preventDefault();

        // every time you press enter the values must be renewed

        var pin1 = jQuery('#pin1').val();
        var pin2 = jQuery('#pin2').val();
        var pin3 = jQuery('#pin3').val();
        var pin4 = jQuery('#pin4').val();
        var pin = pin1 + pin2 + pin3 + pin4;

        if ($.trim(pin).length !== 4) { 
          // remove white space and check if 4 characters
            alert("Bitte füllen Sie alle Inputfelder aus");
        } else {
            $("form").submit();
        }
    }
});
于 2013-10-21T09:28:07.107 回答
0

所有发布的答案都使用了低效的查询实践。您不应该查询每个按键中的元素。使用一次 jQuery 选择器并将它们存储在变量中：

var pin1 = $('#pin1'), pin2 = $('#pin2'), pin3 = $('#pin3'), pin4 = $('#pin4');


$("input").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        var pin = pin1.val() + pin2.val() + pin3.val() + pin4.val()

        if(pin == ""){
            alert("Bitte füllen Sie alle Inputfelder aus");
        } else {
            $("form").submit();
        }
    }
});

但是，这段代码仍然不能像您希望的那样工作。如果用户在其中一个字段中输入值并点击回车，submit()则将调用该方法。

尝试检查有效输入，而不是检查无效输入。我还进行了一些其他最佳实践更改：

var $inputs = $('.login_input'), $form = $('#pin_login');

$inputs.keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();

        var pin = $inputs.map(function(i,ele){return ele.value}).get().join('');

        if(pin.length == 4) {
            $form.submit();
        } else {
            alert("Bitte füllen Sie alle Inputfelder aus");
        }
    }
});
于 2013-10-21T10:05:30.897 回答