javascript - 在javascript中使用for循环验证多个下拉列表

Question

我有多个动态创建的 for 循环并命名为 act1[ ]、act2[ ]、act3[ ].. 直到 act10[ ]。 (可能会或可能不会数到 10)

现在我想提交表单并获取下拉列表的所有值，但首先我想验证是否所有下拉列表的值都不等于“0”(我将标签放在 value=0 中，

例如:

<option value=0>Select Activity..</option>

我尝试将“onsubmit”属性放在表单标记中，以便在转到下一页之前它将在脚本中排在第一位。我放了一个数组来计算创建的行数。但现在我正在核实。这是我的代码:

<script>
function validateForm(){
var table = document.getElementById('activityTable');
var rowCount = table.rows.length;

for(var a=1; a<=rowCount; a++){
    var dd = document.getElementById("act"+ a +"[]");
    var ddval = dd.value;

    if (ddval!=0){
        //dont know what to put
    }
    else{
        //don't know what to put
    }
}
}
</script>

我还希望该函数在返回 false 时使页面保持不变，在返回 true 时转到下一页。

Answer 1

您可以在 onsubmit 中调用 validateForm 函数并返回 true(已验证)或 false(未验证)值。像这样:

<!--* to validate before form submit, include 'return' inside your onsubmit tag *-->
<form name='myForm' action='path/to/file.php' onsubmit='return validateForm()' 
method='post'>
    <!-- Make sure your form tags are completely outside your table,
         mixing them could result in invalid HTML which causes problems 
         (for best results, I'd ditch the table and use CSS instead) -->
<table>Your Table Here</table>
</form>

<script>
function validateForm(event){
    var table = document.getElementById('activityTable');
    var rowCount = table.rows.length;
    var allValid = true;

    for(var a=1; a<=rowCount; a++){
        var dd = document.getElementById("act"+ a +"[]");
        var ddval = dd.value;

        if (ddval!=0){
            allValid = true;
            // open the console so you can watch logs, this helps 
            // for troubleshooting but remove those in production
            console.log(a + ' returned true ' + allValid);
        }
        else{
            allValid = false;
            console.log(a + ' returned false ' + allValid);
            // you shouldn't need this, but if returning false
            //  doesn't work try adding preventDefault (you'll also
            //  have to pass 'event' into your function above) 
               event.preventDefault();
        }
    }
    // After you've looped through all rows, allValid will return true if
    // they were all true, or false if any of them were still 0.
    console.log('returning allValid as: ' + allValid;)
    return allValid; 
}
</script>

• 检查 onsubmit="return validateForm()"(将返回 true 或 false)
• 注意您的表单/表格标签，无效的 HTML 可能会导致问题
• 添加控制台日志或警报以帮助进行故障排除
• 如果 false 添加 event.preventDefault(但你不应该需要这个，返回 false 应该停止提交表单)

如果您尝试这样做但仍然无法正常工作，您可以尝试发布您的表单/表格代码，以便我们更好地解决所有问题。希望这对您有所帮助!