表單驗證 - 專注於「錯誤」輸入

Question

我顯示了註冊表單的錯誤消息/警報，它指向具有錯誤的輸入。

我也想關注這個錯誤輸入。

但是，我的代碼目前主要集中在最後一次輸入？

繼承人鏈接。重新創建，只需點擊寄存器而不填寫任何內容。錯誤顯示爲第一個div ...但着重於最後一個。

link

我當前的代碼：

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