Question

我有一个问题。我将验证我的Testsite。所以我有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();
            }



        }
    });

我的Testsite：http://devauth.labscope.de/htmlapp/login.html?email=HTML5_APP_dmarkstaedter@iscope.de

Answer 1

必须在事件处理程序中读取输入字段的值，在这种情况下，您正在读取dom ready上的pin值...这意味着它具有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();
        }
    }
});

Answer 2

你需要检查你的按键事件里面的输入的值，因为你正在检查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();
            }

        }
    });

Answer 3

您必须在按键功能中更新或创建输入值的变量。当页面加载时设置变量，因此当您按Enter键时，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();
        }
    }
});

Answer 4

$("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();
        }
    }
});

Answer 5

所有发布的答案都使用低效的查询练习。您应不查询每个按键中的元素。使用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");
        }
    }
});

用按键输入验证

5 个答案: