Question

我正在显示注册表单的错误消息/警报，指向输入时出现错误。

我也想关注这个错误输入。

但是，我的代码目前专注于最后一个输入？

这是一个链接。要重新创建，只需单击“注册”而不填写任何内容。错误显示第一个div ...但是重点放在最后一个。

我目前的代码：

$('#register-btn').on('click', checkEmpty);

function checkEmpty(){
    var emptyDiv = $('.add-listing-input').filter(function() { 
        return $(this).val() == "";
    });

    if(emptyDiv.length > 0){
        var theTop = emptyDiv.position();
        var theBottom = theTop.top + emptyDiv.height() +25;
        var theText = emptyDiv.attr('id');
        $('#register-errors').css('top',theBottom+'px').show();
        $('#error-text').text('Your '+theText+' is missing, please fill in');
        emptyDiv.focus();
        emptyDiv.on('keydown', function(){
                $('#register-errors').hide();
                $('#error-text').text('');

        });
    }else{
        $('#register-errors').hide();
        $('#error-text').text('');
        checkEmails()
    }

}

Answer 1

由于emptyDiv实际上是所有空字段的集合，因此说emptyDiv.focus()之类的内容会尝试关注所有字段（这是不可能的），显然只是将焦点集中在最后一个字段上。

尝试使用.first()方法将其过滤到您想要的内容：emptyDiv.first().focus()

这是我建议的重写：

//Select some elements once
var $registerErrors = $('#register-errors');
var $errorsMsg = $('#error-text');

//click the registed button
$('#register-btn').click(function(){
    var $emptyInputs = $('.add-listing-input').filter(function() { 
        return this.value == "";
    });

    if($emptyInputs){
        var $firstEmptyInput = $emptyInputs.first();

        var bottomPosition = $firstEmptyInput.position().top + $firstEmptyInput.height() +25;
        var inputId = $firstEmptyInput.attr('id');

        $registerErrors
            .css('top', bottomPosition)
            .show();

        $errorsMsg.text('Your '+ inputId +' is missing, please fill in');

        $firstEmptyInput
            .focus()
            .one('keydown', clearError); //this event only fires once!
    }else{
        clearError();
        checkEmails();
    }
});

function clearError(){
    $registerErrors.hide();
    $errorsMsg.text('');
}

表单验证 - 专注于'错误'输入

1 个答案: