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>

我期待的是，一旦所有字段都填满，提交按钮就可用了。但是没有。不幸的是，我不能只检查所有“正文输入”元素，因为在同一页面上有另一种形式。我有一种感觉，我的问题出现在$('#add_prod_form input, #add_prod_form textarea').each(function()部分的某个地方，但我尝试了大约100种方法而没有任何作用。

我目前正在修改我找到的代码here

Answer 1

表单中的某些字段可能为空，例如剩余的四个文件输入元素。

由于您已经有一个固定的字段列表，您附加了一个事件处理程序，您也可以在执行检查时重复使用它：

＆＃13;

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

＆＃13;

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

＆＃13;

可以通过在每个必填字段中添加一个类来进一步改进，这样可以减少选择器的大小，以便以后添加字段更容易，而无需编辑代码。

Answer 2

当您搜索input时，它还会包含没有submit或value的{{1}}按钮。它应该是 -

null

Working Demo

Answer 3

谢谢大家。

正如杰克指出的那样，我的问题是我正在循环遍历所有#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 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>

Answer 5

这是因为：

<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

如何正确检查是否所有表单元素都填充了JavaScript

5 个答案: