检查多个textareas如果为空

Question

我有多个textareas并且我试图检查它们是否都是空的，然后应该向用户提示一条消息，要求他检查他的条目并且至少填充一个文本区域。

＆＃13;

＆＃13;

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);

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我错过了什么或做错了什么？当我点击提交没有任何反应时，表格即使是空的也会被提交

Answer 1

您可以使用required属性代替javascript。看看here是否可以使用，以下是一个例子：

＆＃13;

＆＃13;

form *{
  display:block;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

现在我更了解这个问题了，这是我更新的答案：

＆＃13;

＆＃13;

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);

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;