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

Question

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

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

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

я в настоящее время адаптации кода я нашел here

Answer 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">

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

Answer 2

Это происходит потому, что:

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

это Val() равно нулю всегда,

Изменить его:

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

jsfiddle

Answer 3

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

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

Working Demo

Answer 4

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

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

я изменил

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

Спасибо !!!

Answer 5

не использовать 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>