检查是不是所有必填字段都填写在特定的 div 中

Posted 2023-05-09

【中文标题】检查是不是所有必填字段都填写在特定的 div 中

【英文标题】：Check if all required fields are filled in a specific div检查是否所有必填字段都填写在特定的 div 中

【发布时间】：2019-11-26 22:54:07

【问题描述】：

我有一些从数据库动态生成的表单字段。有输入、复选框、单选按钮、文本区域和选择。所有字段都在 ID dynamic-form-fields 的父 div 中。某些字段具有required 属性。

这是一个多步骤表单，因此每个“步骤/页面”都需要在进行下一步之前进行验证。所以它没有提交表单。

如何检查 div dynamic-form-fields 中的所有必填字段是否已填写？

这是我的 html 代码的样子：

<input type="text" name="dff[]" placeholder="Name" required>
<input type="text" name="dff[]" placeholder="Date of Birth">
<input type="text" name="dff[]" placeholder="Email" required>
<input type="radio" name="gender" value="Male" required>
<input type="radio" name="gender" value="Female" required>
<select name="pet">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="bird">Bird</option>
</select>

<button id="check">Check</button>

<script>
    document.getElementById("check").onclick = function () 
        if() 
            alert('error please fill all fields!');
        
    ;
</script>

如您所见，有些字段是必需的，有些则不是。每次都不同，因此解决方案必须是动态的。还有不同类型的输入，例如选择、单选、复选框、文本等...如何确保 div ID dynamic-form-fields 中的每个“required”字段都已填写？

---

我的尝试：

也许是这样，但我如何在 div ID dynamic-form-fields 下获取每种类型的输入（文本、单选、复选框、选择等）？

$('#dynamic-form-fields input:required').each(function() 
  if ($(this).val() === '')
      alert('error please fill all fields!');
);

【问题讨论】：

您是在 div 中添加这些，还是用数据库中的 div 包装？

@CodeManiac 嗨，我看到了你的回答，我更新了问题。这是一个多步骤的表格，所以你以前的表格不起作用，因为我实际上并没有提交表格。这是 div dynamic-form-fields 内的 foreach 循环。

为什么不简单地<form validate>？

如果它是一个多步骤的表单，你实际上应该做的是只检查一个步骤的值而不是所有的值，并且在提交时你应该检查所有的值，

【参考方案1】：

document.getElementById("check").onclick = function() 
  let allAreFilled = true;
  document.getElementById("myForm").querySelectorAll("[required]").forEach(function(i) 
    if (!allAreFilled) return;
    if (!i.value) allAreFilled = false;
    if (i.type === "radio") 
      let radioValueCheck = false;
      document.getElementById("myForm").querySelectorAll(`[name=$i.name]`).forEach(function(r) 
        if (r.checked) radioValueCheck = true;
      )
      allAreFilled = radioValueCheck;
    
  )
  if (!allAreFilled) 
    alert('Fill all the fields');
  
;

<div id="myForm">
  <input type="text" name="dff[]" placeholder="Name" required>
  <input type="text" name="dff[]" placeholder="Date of Birth">
  <input type="text" name="dff[]" placeholder="Email" required>
  <input type="radio" name="gender" value="Male" required>
  <input type="radio" name="gender" value="Female" required>
  <select name="pet" required>
    <option value="">Select a pet</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="bird">Bird</option>
  </select>
</div>
<button id="check">Check</button>

【讨论】：

但是有一个问题，select 不起作用，radio 也不起作用

看到这个小提琴我想我忘了更新我的答案jsfiddle.net/02hoa3d7我已经更新了我的答案也很抱歉

在选择而不是选项上使用禁用

非常好的答案，谢谢@BlackMamba

救命！！

【参考方案2】：

您可以使用:invalid 来执行此操作。

演示：

$('#check').on("click", function()
  let valid = true;
  $('[required]').each(function() 
    if ($(this).is(':invalid') || !$(this).val()) valid = false;
  )
  if (!valid) alert("error please fill all fields!");
  else alert('valid');
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="dff[]" placeholder="Name" required>
<input type="text" name="dff[]" placeholder="Date of Birth">
<input type="text" name="dff[]" placeholder="Email" required>
<input type="radio" name="gender" value="Male" required>
<input type="radio" name="gender" value="Female" required>
<select name="pet" required>
    <option selected disabled>Select a pet</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="bird">Bird</option>
</select>

<button id="check">Check</button>

【讨论】：

你能举个例子吗？

编辑了我的答案。请检查。

赞成。检查 ":invalid" 属性是一个简单而有效的解决方案。我改用 ":valid" 属性。对于电子邮件验证，我定义了输入类型="email" 并让浏览器验证输入的值是否为电子邮件。后来在表单验证中使用了这个validForm = $("#email").is(':valid');

【参考方案3】：

您可以检查required 属性是否可用，

$('#dynamic-form-fields').each(function() 
    var hasRequired = $(this).attr('required');
    if (typeof hasRequired !== "undefined" && hasRequired !== false) 
        // This is required inputs.
    

参考：Link

【参考方案4】：

您可以根据输入类型进行单独检查，请考虑以下几点：

var isEmpty = false;
$("#check").on('click', function() 
  isEmpty = false
  $('input[type=text]:required').each(function() 
    if ($(this).val() === '')
      isEmpty = true;
  );
  var radioselected = false;
  //$('input[name=gender]:required').each(function() 
  $('input[type=radio]:required').each(function() 
    if ($(this).is(':checked'))
      radioSelected = true;
  );

  if (!radioSelected)
    isEmpty = true;

  if ($("[name=pet]").val() == "")
    isEmpty = true;

  //if (!$(".cb").is(":checked"))
  //  isEmpty = true;

  if (isEmpty)
    alert('error please fill all fields!');
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="dff[]" placeholder="Name" required>
<input type="text" name="dff[]" placeholder="Date of Birth">
<input type="text" name="dff[]" placeholder="Email" required>
<input type="radio" name="gender" value="Male" required>
<input type="radio" name="gender" value="Female" required>
<select name="pet" required>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="bird">Bird</option>
</select>
<!--<input type="checkbox" class="cb" required />-->
<button id="check">Check</button>

【讨论】：

@pixie123 很高兴它有帮助

抱歉，select 和 checkbox 在添加和需要时不起作用