Проверьте, нет ли пустого ввода

Я искал решение для этого, но, похоже, не могу найти никаких примеров, которые будут работать для меня. Вот что у меня до сих пор:

$("#register-form").submit(function(){
            if($(".required input").val() == '') {
                alert("Please fill in all the required fields (indicated by *)");
                $(".required").addClass('highlight');
                // $('input[type=submit]', this).attr('disabled', 'disabled');
                return false;
            }
        });

По какой-то причине, когда я отправляю форму без заполнения всех необходимых полей (их два), это работает, но если один из них заполнен, это не так.

Любые идеи, почему?

Спасибо

osu

Ответ 1

Проблема с вашим кодом заключается в том, что вы проверяете только первое поле, которое помечается по мере необходимости. $(".required input") возвращает только первый вход в форме, соответствующий этому селектору.

Этот цикл проходит через все входы в форме, которая помечена как обязательная (в соответствии с вашим селектором). Если он находит значение со значением '', то он устанавливает функцию отправки для возврата false и выделяет пустые поля. Он также удаляет класс выделения из полей, которые теперь действительны, но ранее недействительны в попытке отправить раннюю форму.

$("#register-form").submit(function(){
    var isFormValid = true;

    $(".required input").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("highlight");
            isFormValid = false;
        }
        else{
            $(this).removeClass("highlight");
        }
    });

    if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");

    return isFormValid;
});

Ответ 2

$("#register-form").submit(function() {
  $('.required input').each(function() {
    if ($($this).val() == '') { 
      $(this).addClass('highlight');
    }
  });

  if ($('.required input').hasClass('highlight')) {
    alert("Please fill in all the required fields (indicated by *)");
    return false;
  }
}

Дайте это выстрел.

ИЗМЕНИТЬ Перемещено предупреждение, чтобы пользователи не убирали свои лица с помощью предупреждающих сообщений, хороший улов.

Ответ 3

Простое решение!:

 function checkForm(){
        $("input.required").css("border","1px solid #AFAFAF");
        $("input.required[value=]").css("border-color","red");
        if($("input.required").val().length<2)return false;
        return true;
    }

Ответ 4

Возможно, ваше состояние должно быть следующим:

if($("input.required").val() == '')... //Pay attention to the selector

Причина того, что ваш селектор находил все входы дети.required

Ответ 5

Основываясь на ответе Дэвида Фелла (у меня есть ошибка, на мой взгляд), вы можете сделать это:

$("#register-form").submit(function() {
  $('.required input').each(function() {
    if ($(this).val() == '') {           
      $(this).addClass('highlight');
    }
  });

  if ($('.required input.highlight').size() > 0) {
    alert("Please fill in all the required fields (indicated by *)");
    return false;
  }
}

Ответ 6

Если

$(".required input")

соответствует нескольким элементам, тогда

$(".required input").val() == ''

вероятно, не будет делать то, что вы ожидаете.

Ответ 7

Вы не можете ссылаться на значения всех входных данных формы.

var valid = true;
$('.required input').each(function(){
   if( $(this).val() == '' ){
      valid = false;
      $(this).addClass('highlight');
   }
});

form plugin сделает это для вас, кстати.

Ответ 8

имя входа или id в этом случае используется идентификатор входа

HTML:

<input type="text" id="id"... />

Jquery:

if (!$("#id").val()) {
   do something...
}

Ответ 9

Этот код получает все поля формы с списком выбора и флажком и т.д.

var save_prms = $("form").serializeArray();
    $(save_prms).each(function( index, element ) {
        alert(element.name);
        alert(element.val);
    });