Как правильно проверить, заполнены ли все элементы формы JavaScript?

У меня есть форма:

<form action="process.php" method="POST" enctype="multipart/form-data" id="add_prod_form">
Item Name: <input type="text" name="add_prod_name" id="add_prod_name"/><br /><br />
Image 1: <input type="file" name="add_prod_image[]" id="add_prod_image"/><br /><br />
Image 2: <input type="file" name="add_prod_image[]" /><br /><br />
Image 3: <input type="file" name="add_prod_image[]" /><br /><br />
Image 4: <input type="file" name="add_prod_image[]" /><br /><br />
Image 5: <input type="file" name="add_prod_image[]" /><br /><br />
Short description:<br />
<textarea rows="7" cols="50" name="add_prod_description_short" id="add_prod_description_short"/></textarea><br />
Long description:<br />
<textarea rows="7" cols="50" name="add_prod_description_long" id="add_prod_description_long"/></textarea><br /><br />
Price: <input type="text" name="add_prod_price" id="add_prod_price"/><br /><br />
<input type="hidden" name="action" value="add_product" />
<input type="submit" name="submit" id="add_prod_submit" disabled="disabled">

И у меня есть небольшой script:

<script>
$('#add_prod_name, #add_prod_image, #add_prod_description_short, #add_prod_description_long, #add_prod_price').keyup(function() {
    if(allFilled()){
         $('#add_prod_submit').removeAttr('disabled');
    }
});

function allFilled() {
    var filled = true;
    $('#add_prod_form input, #add_prod_form textarea').each(function() {
        if($(this).val() == '') filled = false;
    });
    return filled;
}

</script>

Я ожидаю, что когда все поля будут заполнены, кнопка submit станет доступной. Это не так. К сожалению, я не могу просто проверить все элементы "body input", поскольку на одной странице есть другая форма. У меня есть чувство, что моя проблема лежит где-то в разделе $('#add_prod_form input, #add_prod_form textarea').each(function(), но я пробовал около 100 способов и ничего не работает.

В настоящее время я адаптирую код, который я нашел здесь

Ответ 1

У вас есть поля в вашей форме, которые могут быть пустыми, например, оставшиеся четыре элемента ввода файла.

Поскольку у вас уже есть фиксированный список полей, на которые вы прикрепляете обработчик событий, вы можете повторно использовать это при выполнении проверок:

jQuery(function($) {
  var $fields = $('#add_prod_name, #add_prod_image, #add_prod_description_short, #add_prod_description_long, #add_prod_price');
  
  $fields.on('keyup change', function() {
    if (allFilled($fields)) {
       $('#add_prod_submit').removeAttr('disabled');
    }
  });

  function allFilled($fields) 
  {
    return $fields.filter(function() {
      return this.value === ''; 
    }).length == 0;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="process.php" method="POST" enctype="multipart/form-data" id="add_prod_form">
Item Name: <input type="text" name="add_prod_name" id="add_prod_name"/><br /><br />
Image 1: <input type="file" name="add_prod_image[]" id="add_prod_image"/><br /><br />
Image 2: <input type="file" name="add_prod_image[]" /><br /><br />
Image 3: <input type="file" name="add_prod_image[]" /><br /><br />
Image 4: <input type="file" name="add_prod_image[]" /><br /><br />
Image 5: <input type="file" name="add_prod_image[]" /><br /><br />
Short description:<br />
<textarea rows="7" cols="50" name="add_prod_description_short" id="add_prod_description_short"/></textarea><br />
Long description:<br />
<textarea rows="7" cols="50" name="add_prod_description_long" id="add_prod_description_long"/></textarea><br /><br />
Price: <input type="text" name="add_prod_price" id="add_prod_price"/><br /><br />
<input type="hidden" name="action" value="add_product" />
<input type="submit" name="submit" id="add_prod_submit" disabled="disabled">

Ответ 2

Когда вы ищете для input, он также будет включать кнопку submit, которая не имеет value или null. Это должно быть -

$('#add_prod_form input, textarea').not('#add_prod_submit').each(function(){ ...

Рабочая демонстрация

Ответ 3

Спасибо всем.

Моя проблема, как заметил Джек, заключалась в том, что я перебирал все #add_prod_form input.

i изменено

function allFilled() {
    var filled = true;
    $('#add_prod_form input, #add_prod_form textarea').each(function() {
        if($(this).val() == '') filled = false;
    });
    return filled;
}

function allFilled() {
    var filled = true;
    $('#add_prod_name, #add_prod_image, #add_prod_description_short, #add_prod_description_long, #add_prod_price').each(function() {
        if($(this).val() == '') filled = false;
        console.log($(this).val())
    });
    return filled;
}

Спасибо!!!

Ответ 4

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

Вот мой код, я удалил ваш javascript, удалил отключенную кнопку отправки формы и изменил тип ввода для цены на номер. оберните все элементы, которые вам нужно проверить внутри элемента, и поместите требуемый атрибут для каждого элемента, который должен быть заполнен перед отправкой.

<form action="process.php" method="POST" enctype="multipart/form-data" id="add_prod_form">
    Item Name: <input type="text" name="add_prod_name" id="add_prod_name" required/><br />
    Image 1: <input type="file" name="add_prod_image[]" id="add_prod_image" required/><br />
    Image 2: <input type="file" name="add_prod_image[]" required/><br />
    Image 3: <input type="file" name="add_prod_image[]" required/><br />
    Image 4: <input type="file" name="add_prod_image[]" required/><br />
    Image 5: <input type="file" name="add_prod_image[]" required/><br />
    Short description:<br />
    <textarea rows="7" cols="50" name="add_prod_description_short" id="add_prod_description_short"required/></textarea><br />
    Long description:<br />
    <textarea rows="7" cols="50" name="add_prod_description_long" id="add_prod_description_long"required/></textarea><br />
    Price: <input type="number" name="add_prod_price" id="add_prod_price"required/><br />
    <input type="hidden" name="action" value="add_product" required/>
    <input type="submit" name="submit" id="add_prod_submit">
</form>

Ответ 5

Это потому, что:

<input type="submit" name="submit" id="add_prod_submit" disabled="disabled">

it val() всегда равно null,

Измените его с помощью

<button type="submit" name="submit" id="add_prod_submit" disabled="disabled">submit</button>

jsfiddle