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

Posted 2023-02-24

【中文标题】如何正确检查所有表单元素是不是都用 JavaScript 填充

【英文标题】：How to properly check if all form elements are filled with JavaScript如何正确检查所有表单元素是否都用 JavaScript 填充

【发布时间】：2015-07-18 21:35:24

【问题描述】：

我有一个表格：

<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

【问题讨论】：

您可能并不总是有五张产品图片，因此如果至少有一张是空的也可以理解。

给你的表单一个id（比如myForm），然后将选择器限制为只有该表单的孩子

@btquanto 他已经这样做了#add_prod_form

是的，我现在看到了，然后限制为add_prod_form 然后：D

是的，但是当您使用 #add_prod_form input 选择器时，您会检查它们。

【参考方案1】：

这是因为：

<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

【讨论】：

这不正是我所做的吗？我不明白为什么将它放在两条线上会更好。除非当然必须……这就是你推荐它的原因吗？

我发现了这个bug，它是提交也使用输入标签，你可以像上面更新的代码一样用按钮标签来改变它。

【参考方案2】：

当您搜索inputs 时，它还将包括没有value 或null 的submit 按钮。应该是——

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

Working Demo

【讨论】：

那么他的问题不是他所说的。不错

@btquanto 你是对的。问题是别的。

@btquanto 不，你不对。他知道自己的问题出在哪里，而且他知道自己在选择元素时过于笼统。他只是不知道如何正确选择

【参考方案3】：

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

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

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

可以通过向每个必填字段添加一个类来进一步改进，这样可以减小选择器的大小，并且可以更轻松地在以后添加字段而无需编辑代码。

【讨论】：

这是一个很好的答案，我唯一要改变的就是在所有需要检查的元素上简单地使用一个类。

@azium 是的，这可能是对 OP 代码的改进 :)

我喜欢 azium 的想法。我要去清理它。谢谢你们！

@杰克。如果我在 last 上传图片，这会起作用吗？ <input type="file"> 是否有 keyup 事件？

@Ja͢ck Thnks :) 如果用户最后选择上传图片（只是说），那么这是 Matthew Goulart 的代码将失败的场景。

【参考方案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;

谢谢！！！

【讨论】：

祝你好运。我的一个建议是将validate 之类的类添加到您要检查的所有输入中，然后只需使用$('.validate').each(..) 进行选择，否则如果您继续添加输入，您当前的选择器将变得太长

【参考方案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>

【讨论】：

如果所有浏览器都积极支持，那就太好了；也许再过几年;-)

我已经在 chrome、firefox、IE 上测试过了。大多数用户只使用这些浏览器，因此验证工作正常。

遗憾的是，您自己的设置并不能代表所有互联网用户；也就是说，现在添加这些属性绝对值得。