JQuery проверить пустое поле не проверяет все поля

Question

Например, я использую приведенный ниже скрипт для проверки пустых полей:

$('a.submit').click(function() {
 if ($('.LoginData').val() == "")  {
  $('input:text[value=""]').attr('style', 'border-color:#FF0000;');
 } else {
  $(this).parents('form').submit();
 }
});

Все входные элементы имеют класс LoginData, поэтому я использовал селектор класса jQuery, который выбирает все элементы, содержащие этот класс. Однако когда условие if находит поле, которое не является пустым, оно просто останавливается на этом.

Я думаю, это нормальное поведение для операторов if, есть ли альтернатива этому?

Спасибо.

Answer 1

". Val ()" имеет только одно возвращаемое значение - оно может дать вам значение только одного элемента;Этот элемент будет первым элементом в коллекции $ ().

$('a.submit').click(function() 
{
  var ok = true;
   $('.LoginData').each(function() 
   {  
       if($(this).val() == "")  
       { 
              $(this).attr('style', 'border-color:#FF0000;'); 
              ok = false;
       }
   }
   if (ok)
   {
      $(this).parents('form').submit(); 
   } 
});

Answer 2

Вот еще один метод.Кроме того, форма не отправляется в Chrome, поэтому она не ведет себя так, как описано в SomeoneS, не имея сразу файла warn.default.

<script type="text/javascript">
    $('#ctl00_PlaceHolderMain_changeRequestbtnSave').click(function (e) {
        var valid = true;
        //check all inputs within a parent div)
        $('.requiredfield input').each(function () {
            //check if values is null
            if ($(this).val() == "") {
                $(this).addClass('requiredflag');
                valid = false;
            }
        })
        if(!valid) {
            e.preventDefault();
        }
    });
</script>

Помните, что это должно идти в самом низу вашего HTML, еслиВы не используете document.ready

Мои стили ниже:

<style>
.requiredflag {
    border: 1px solid red;
}
.requiredfield:after {
    content: "*";
    font-weight: bold;
    color: red;
}
</style>

Answer 3

Почему вы используете .click() для начала?Я бы посоветовал вам использовать .submit(), если вы хотите использовать jQuery для отправки формы (для получения дополнительной информации о .submit() прочитайте документацию jQuery).И, как говорят другие пользователи, вы можете использовать функцию .each() для перебора всех полей ввода.Вот как я бы это сделал:

$("#form").submit(function(event){
        $(".classForAllInput").each(function(index) {
          if ($(this).val() == 0) {
              $("#error").css({"display": "inline"}).text("Some of the fields are empty");
              event.preventDefault();
          }
        });
    });

Функция jQuery .each() будет перебирать все поля ввода, и если любое из них будет пустым, будет отображаться сообщение об ошибке (при условии, что у вас есть областьдля отображения идентификатора ошибки).

Answer 4

Я заметил, что это не работает в Chrome (он всегда отправляет форму), поэтому вам нужно добавить:

  event.preventDefault();

Как это:

$('a.submit').click(function() 
{
  event.preventDefault();
  var ok = true;
   $('.LoginData').each(function() 
   {  
       if($(this).val() == "")  
       { 
              $(this).attr('style', 'border-color:#FF0000;'); 
              ok = false;
       }
   }
   if (ok)
   {
      $(this).parents('form').submit(); 
   } 
});

Answer 5

вам нужно использовать каждый ()

Answer 6

val() возвращает только значение первого сопоставленного элемента, поэтому вы не можете использовать это, чтобы проверить, заполнена ли форма.

Вам нужно использовать метод jQuery.each() для итерации поэлементы '.loginData'.

Хорошим решением будет использование метода each, присоединение класса к пустым элементам (что-то вроде validate-empty).Это можно использовать для прикрепления стиля к элементу, который показывает пользователю, что он необходим (так же, как вы делаете выше, но с определенным классом).Затем вы можете проверить форму, например, $('#my-form .validate-empty').size() == 0, чтобы увидеть, есть ли ошибки перед отправкой.

Answer 7

Ваш код в данный момент просматривает только первый элемент. Вам нужно будет использовать .each () вместе с проверкой, чтобы убедиться, что все идет по плану.

Также ваш цикл в своем текущем состоянии немедленно отправит форму, если поле не пустое.