0

エラーのある入力を指す登録フォームのエラーメッセージ/アラートを表示しています。

このエラー入力にも焦点を当てたいと思います。

しかし、私のコードは現在、最後の入力に焦点を当てていますか？

ここにリンクがあります。再作成するには、何も入力せずに[登録]をクリックするだけです。最初のdivにエラーが表示されますが、最後の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()
    }

}
4

1 に答える 1

2

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('');
}
于 2013-02-24T20:49:40.723 に答える