驗證至少兩個輸入字段應填寫 6 個或更多

Question

這里我們有 6 個輸入，我正在尋找驗證，如果未填寫至少 2 個字段，它會顯示警報 esle 在 html 中提交表單。

<form  action="/" method="POST">
<p>
<input type="file" name="file1">
</p>
<p>
<input type="file" name="file2">
</p>
<p>
<input type="file" name="file3">
</p>
<p>
<input type="file" name="file4">
</p>
<p>
<input type="file" name="file5">
</p>
<p>
<input type="file" name="file6">
</p>

<input type="submit" value="submit">
</form>

Answer 1

在這里，我們有 6 個輸入，我正在尋找驗證，如果未填寫至少 2 個字段，則顯示警報 esle 以 html 形式提交表單。

<form  action="/" method="POST">
<p>
<input type="file" name="file1">
</p>
<p>
<input type="file" name="file2">
</p>
<p>
<input type="file" name="file3">
</p>
<p>
<input type="file" name="file4">
</p>
<p>
<input type="file" name="file5">
</p>
<p>
<input type="file" name="file6">
</p>

<input type="submit" value="submit">
</form>

Answer 2

嘗試將它們放入 class

 $("#regForm").submit(function(){ let empty = 0; $( ".regInput" ).each(function( index ) { if ($(this).get(0).files.length === 0) { empty++ } }); if (empty >= 2) { alert(empty + " inputs empty") } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <form id="regForm" action="/" method="POST"> <p> <input type="file" name="file1"class="regInput"> </p> <p> <input type="file" name="file2" class="regInput"> </p> <p> <input type="file" name="file3" class="regInput"> </p> <p> <input type="file" name="file4" class="regInput"> </p> <p> <input type="file" name="file5" class="regInput"> </p> <p> <input type="file" name="file6" class="regInput"> </p> <input type="submit" value="submit"> </form>

Answer 3

我們可以在表單上添加一個用於submit的事件偵聽器，循環遍歷所有文件輸入字段並檢查它們是否有效。 這是通過檢查其files屬性的長度來完成的。 如果是，則增加有效字段計數器，並在循環后檢查有效字段的數量是否小於 3。如果是，則使用e.preventDefault()阻止表單提交。

 document.querySelector('form').addEventListener('submit', function(e) { var validFields = 0; this.querySelectorAll('input:not([value])').forEach((e) => { if (e.files.length > 0) { validFields++; } }) if (validFields < 3) { e.preventDefault(); } })

 <form action="/" method="POST"> <p> <input type="file" name="file1"> </p> <p> <input type="file" name="file2"> </p> <p> <input type="file" name="file3"> </p> <p> <input type="file" name="file4"> </p> <p> <input type="file" name="file5"> </p> <p> <input type="file" name="file6"> </p> <input type="submit" value="submit"> </form>

Answer 4

這是非常基本的問題。 所以，非常基本的解決方案，讓任何人都能理解

Java腳本代碼

        function showValidationError() {
            var counter = 0;

            if (document.getElementById("file1").value != "") {
                counter++;
            }
            if (document.getElementById("file2").value != "") {
                counter++;
            }
            if (document.getElementById("file3").value != "") {
                counter++;
            }
            if (document.getElementById("file4").value != "") {
                counter++;
            }
            if (document.getElementById("file5").value != "") {
                counter++;
            }
            if (document.getElementById("file6").value != "") {
                counter++;
            }

            if (counter < 2) {
                alert('error');
                return false;
            }
            return true;
        }

HTML 代碼

<form action="/" method="POST">
        <p>
            <input type="file" name="file1" id="file1">
        </p>
        <p>
            <input type="file" name="file2" id="file2">
        </p>
        <p>
            <input type="file" name="file3" id="file3">
        </p>
        <p>
            <input type="file" name="file4" id="file4">
        </p>
        <p>
            <input type="file" name="file5" id="file5">
        </p>
        <p>
            <input type="file" name="file6"  id="file6">
        </p>

        <input type="submit" value="submit" onclick="return showValidationError();">
    </form>