выберите первое пустое поле формы

Question

Я проверяю форму на пустые значения с помощью следующего метода

      $("#reservationForm").find("input[type=email], input[type=tel], input[type=text]").filter(function(){
       if($(this).val() == ""){
        $(this).css("border","solid 1px red").after('Please fill in your '+this.id+'');
        f.preventDefault();
       }

Теперь я хочу улучшить удобство использования и установить фокус на первое пустое поле, но это проблема.Я пробовал все следующее, но каждый раз только последнее пустое поле получает фокус

        $(this).eq(0).focus();
        $(this:first).focus();
        $(this:first-child).focus();

Как я могу автоматически установить фокус на пустое поле first

Answer 1

Вам нужно поместить его в конце, после .filter() в целом, например:

$("#reservationForm").find("input[type=email], input[type=tel], input[type=text]").filter(function(){
  if($(this).val() == ""){
     $(this).css("border","solid 1px red").after('Please fill in your '+this.id+'');
     f.preventDefault();
     return true;
  }
}).first().focus();

Таким образом, вы получаете .first() элементов, которые соответствуют фильтру. return true важен, потому что только те элементы, которые являются пустыми, остаются в наборе после вызова .filter() ... в настоящее время вы используете его как более .each() вызов.

Причина, по которой он в настоящее время устанавливает его в качестве последнего, заключается в том, что this равен каждый элемент при выполнении итерации, поэтому он фокусируется на всех из них, и в зависимости от того, что выполняется last , оставьте с фокусом ... вместо этого вы хотите получить набор пустых и сфокусировать первый из этих элементов.