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

Question

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

$("#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

Answer 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;
});

Answer 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;
  }
} 

Дайте этому шанс.

EDIT Перемещено оповещение, чтобы пользователи не сдували свои лица предупреждающими сообщениями, хороший улов.

Answer 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;
    }

Answer 4

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

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

Answer 5

Может быть, ваше состояние должно быть таким:

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

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

Answer 6

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

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

Answer 7

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

HTML:

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

Jquery:

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

Answer 8

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

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

Плагин форм , кстати, сделает это за вас.

Answer 9

Если

$(".required input")

соответствует более чем одному элементу, то

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

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