使用 keypress enter 验证答案

【问题标题】：validate with keypress enter使用 keypress enter 验证
【发布时间】：2013-10-29 17:02:27
【问题描述】：

我有问题。我将验证我的测试站点。所以我有 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

【问题讨论】：

标签： jquery validation input keypress

【解决方案1】：

必须在事件处理程序上读取输入字段的值，在您的情况下，您正在读取 dom 就绪上的 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();
        }
    }
});

【讨论】：

【解决方案2】：

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

        }
    });

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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();
        }
    }
});

【讨论】：

【解决方案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() 方法将被调用。

不要检查 invalid 输入，而是尝试检查 valid 输入。我还对其他一些最佳实践进行了更改：

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

【讨论】：