檢查多個textareas如果爲空

Question

我有多個textareas，我試圖檢查它們是否都是空的，然後應該提示用戶要求他檢查他的條目並且至少有一個文本區域被填滿。

function checkEvent() { 
 
    console.log("infunc"); 
 
    if (document.getElementById('events_yes').checked) { 
 
    document.getElementById('if_events_yes').style.display = "block"; 
 
    } else { 
 
    document.getElementById('if_events_yes').style.display = "none"; 
 
    } 
 
} 
 

 
function checkText() { 
 
    var content = document.getElementsByName("firewall").value.trim() + document.getElementsByName("ids").value.trim() + 
 
    document.getElementsByName("proxy").value.trim() + document.getElementsByName("dpi").value.trim() + 
 
    document.getElementsByName("net_malware").value.trim() + document.getElementsByName("av").value.trim() + 
 
    document.getElementsByName("forensics").value.trim() + document.getElementsByName("tripwire").value.trim() + 
 
    document.getElementsByName("memdumps").value.trim() + document.getElementsByName("email_logs").value.trim(); 
 
    alert(content.length); 
 

 
}

<form action="ResponseDB" method="post"> 
 
    <input name="tipid" value="<% out.println(tipid);%>" hidden="">Any events to report? 
 
    <br> 
 
    <input type="radio" name="events" onclick="javascript:checkEvent();" id="events_yes" value="yes">Yes 
 
    <br> 
 
    <input type="radio" name="events" onclick="javascript:checkEvent();" id="events_no" value="no" checked>No 
 
    <br> 
 

 
    <div id="if_events_yes" hidden> 
 
    <br> 
 
    <br>Firewall: 
 
    <br> 
 
    <textarea rows="5" cols="80" type="text" name="firewall" id="if_events_yes"></textarea> 
 
    <br>IDS/IPS: 
 
    <br> 
 
    <textarea rows="5" cols="80" type="text" name="ids" id="if_events_yes"></textarea> 
 
    <br>Web Content Filtering/Proxy: 
 
    <br> 
 
    <textarea rows="5" cols="80" type="text" name="proxy" id="if_events_yes"></textarea> 
 
    <br>Deep packet inspection: 
 
    <br> 
 
    <textarea rows="5" cols="80" type="text" name="dpi" id="if_events_yes"></textarea> 
 
    <br>Network malware protection devices (FireEye, Damballa, etc.): 
 
    <br> 
 
    <textarea rows="5" cols="80" type="text" name="net_malware" id="if_events_yes"></textarea> 
 
    <br>Anti-virus software: 
 
    <br> 
 
    <textarea rows="5" cols="80" type="text" name="av" id="if_events_yes"></textarea> 
 
    <br>Forensics Tools: 
 
    <br> 
 
    <textarea rows="5" cols="80" type="text" name="forensics" id="if_events_yes"></textarea> 
 
    <br>Tripwire: 
 
    <br> 
 
    <textarea rows="5" cols="80" type="text" name="tripwire" id="if_events_yes"></textarea> 
 
    <br>Memory Dumps: 
 
    <br> 
 
    <textarea rows="5" cols="80" type="text" name="memdumps" id="if_events_yes"></textarea> 
 
    <br>Email logs: 
 
    <br> 
 
    <textarea rows="5" cols="80" type="text" name="email_logs" id="if_events_yes"></textarea> 
 
    <br> 
 
    </div> 
 
    <input type="submit" onclick="javascript:checkText();" value="Submit"> 
 
</form>

我缺少什麼或者做錯了嗎？當我點擊提交沒有任何反應時，表單即使被提交也將被提交

Answer 1

您可以使用required屬性代替javascript。看看here爲它的使用，這裏有一個例子：

form *{ 
 
    display:block; 
 
}

<form action="ResponseDB" method="post"> 
 
    <textarea required></textarea> 
 
    <textarea required></textarea> 
 
    <textarea required></textarea> 
 
    <input type="submit" value="Submit"> 
 
</form>

---

現在我明白的問題更多，這是我最新的答案：

function checkEvent() { 
 
    console.log("infunc"); 
 
    if (document.getElementById('events_yes').checked) { 
 
    document.getElementById('if_events_yes').style.display = "table-caption"; 
 
    } else { 
 
    document.getElementById('if_events_yes').style.display = "none"; 
 
    } 
 
} 
 

 
function checkText() { 
 
var childDivs = document.getElementById('if_events_yes').getElementsByTagName('textarea'); 
 
var content = 0; 
 
for(i=0; i< childDivs.length; i++) 
 
{ 
 
content += childDivs[i].value.length; 
 
} 
 
    alert(content); 
 

 
}

<form action="ResponseDB" method="post"> 
 
    <input name="tipid" value="<% out.println(tipid);%>" hidden="">Any events to report? 
 
    <br> 
 
    <input type="radio" name="events" onclick="javascript:checkEvent();" id="events_yes" value="yes">Yes 
 
    <br> 
 
    <input type="radio" name="events" onclick="javascript:checkEvent();" id="events_no" value="no" checked>No 
 
    <br> 
 

 
    <div id="if_events_yes" hidden> 
 
    Firewall: <textarea rows="5" cols="80" type="text" name="firewall" id="if_events_yes"></textarea> 
 
    IDS/IPS: <textarea rows="5" cols="80" type="text" name="ids" id="if_events_yes"></textarea> 
 
    Web Content Filtering/Proxy: <textarea rows="5" cols="80" type="text" name="proxy" id="if_events_yes"></textarea> 
 
    Deep packet inspection: <textarea rows="5" cols="80" type="text" name="dpi" id="if_events_yes"></textarea> 
 
    Network malware protection devices (FireEye, Damballa, etc.): <textarea rows="5" cols="80" type="text" name="net_malware" id="if_events_yes"></textarea> 
 
    Anti-virus software: <textarea rows="5" cols="80" type="text" name="av" id="if_events_yes"></textarea> 
 
    Forensics Tools: <textarea rows="5" cols="80" type="text" name="forensics" id="if_events_yes"></textarea> 
 
    Tripwire: <textarea rows="5" cols="80" type="text" name="tripwire" id="if_events_yes"></textarea> 
 
    Memory Dumps: <textarea rows="5" cols="80" type="text" name="memdumps" id="if_events_yes"></textarea> 
 
    Email logs: <textarea rows="5" cols="80" type="text" name="email_logs" id="if_events_yes"></textarea> 
 
    </div> 
 
    <input type="submit" onclick="checkText();" value="Submit"> 
 
</form>