Изменить стиль ввода, если он пуст

Question

Я пытаюсь изменить цвет границы ввода, если она пуста при отправке формы. Моя попытка:

$(document).ready(function() {
  var $form = $('form[name="f_cadastrofinan"]');

  $form.submit(function() {
    var confOs = $('input[name="os"]').val();
    var confData = $('input[name="data"]').val();
    var confTech = $('input[name="tech"]').val();
    var confDescri = $('input[name="descri"]').val();
    var confPag = $('input[name="pag"]').val();
    var confValor = $('input[name="valor"]').val();

    if (confOs == "" || confData == "" || confTech == "" || confDescri == "" || confPag == "" || confValor == "") { //detect empty
      alert('preencha os campos: '); //how to list empty inputs?
      $('input[type="text"]').is(':empty').css('border', '1px solid red'); //change border input
    } else {
      $.post($(this).attr('action'), $(this).serialize(), function(response) {
      }, 'json');
      alert('inserido com sucesso!');
    }

    return false;
  });
});

Answer 1

Посмотри на свою консоль. Это будет содержать ошибку. Это связано с тем, что is() возвращает логическое значение, а не объект jQuery, поэтому вы не можете связать с ним другой вызов jQuery метода.

Кроме того, как указал @Roy в комментариях, :empty смотрит на узлы в элементе. Как таковой, он не работает с value из input элементов.

. Для решения этой проблемы используйте filter() вместо:

$('input[type="text"]').filter((i, e) => e.value.trim().length === 0).css('border', '1px solid red');

Даже лучше, добавьте класс к элемент вместо встраивания CSS в ваш JS:

$('input[type="text"]').filter((i, e) => e.value.trim().length === 0).addClass('error');

Answer 2

Проверьте val().length как показано ниже:

$('input[type="text"]').val().length <= 0 ? $('input[type="text"]').css('border', '1px solid red') : null

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" />

Также есть альтернативный чистый CSS способ:

input:invalid {
  border: 1px solid red;
}

<input type="text" required>