양식 검증 - '오류'입력에 초점

Question

오류가있는 입력을 가리키는 등록 양식에 대한 오류 메시지/경고가 표시됩니다.

이 오류 입력에 대해서도 집중하고 싶습니다.

그러나 현재 내 코드는 마지막 입력에 초점을 맞추고 있습니까?

heres 링크. 다시 작성하려면 아무 것도 입력하지 않고 등록을 클릭하기 만하면 오류가 첫 번째 div에 표시되지만 마지막에 초점을 맞 춥니 다. 현재

link

내 코드 : emptyDiv 이후

$('#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.focus() 같은 것이 (가능하지 않은) 모두에 초점을하려고합니다 말, 실제로 모든 빈 필드의 모음입니다 마지막으로 초점을 맞추기 만하면됩니다.

정확하게 당신이 원하는 그것을 아래로 필터링 할 .first() 방법을 사용해보십시오 :

//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(''); 
}