Проверьте несколько текстовых полей, если они пусты.

Question

У меня есть несколько текстовых полей, и я пытаюсь проверить, все ли они пустые, после чего пользователю будет предложено отправить сообщение, чтобы он проверил его записи и заполнил хотя бы одну текстовую область.

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

Для этого вместо javascript вы можете использовать атрибут required. Посмотрите 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>