檢查是否在特定的div中填寫了所有必填字段

Question

我有一些表單字段是從數據庫動態生成的。 有輸入，復選框，單選按鈕，文本區域和選擇區域。 所有字段都在ID為dynamic-form-fields的父div中。 一些字段具有required屬性。

這是一個多步驟表單，因此在繼續下一步之前，每個“步驟/頁面”都需要進行驗證。 因此，它沒有提交表單。

如何檢查div dynamic-form-fields字段中的所有必填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>

如您所見，某些字段是必填字段，而某些則不是必需字段。 每次都不同，因此解決方案必須動態。 輸入的類型也不同，例如select，radio，checkbox，text等。如何確定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!');
});

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

Answer 2

您可以檢查required屬性是否可用，

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

參考： 鏈接

Answer 3

您可以根據輸入類型進行單獨檢查，請考慮以下事項：

 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> 

Answer 4

您可以使用: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>