我似乎無法在此函式中定位 textarea 欄位。
我基本上對前三個輸入欄位使用 HTML“必需”驗證，但對于 textarea，我只想在用戶提交表單時 textarea 欄位為空時顯示警報。
或者，如果用戶嘗試在未填寫該區域的情況下提交表單，我想在 textarea 欄位中顯示文本，說明“請輸入更多資訊”。
<form action="" class="contactForm" method="POST" id="contactForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="number">Number:</label>
<input type="number" id="number" name="number" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<textarea id= "textArea" rows ="3" cols ="23" name="finalMessage " form="contactForm" placeholder="Enter your fitness goals..."></textarea><br>
<button id="buttonID">Submit</button>
</form>
JavaScript
function formValidation(e) {
e.preventDefault();
const form = document.getElementById("contactForm");
const textArea = document.getElementById("textArea").value;
if(textArea.value === ""){
alert("please enter more information");
}
document.getElementById("buttonID").addEventListener("click", function () {
form.submit();
});
} formValidation();
uj5u.com熱心網友回復：
好的，讓我們從onsubmit事件監聽器開始：
<form action="" class="contactForm" method="POST" id="contactForm" onsubmit="formValidation(event)">
然后簡化formValidation方法：
function formValidation(event) {
if (document.getElementById("textArea").value == "") {
alert("please enter more information");
event.preventDefault();
}
}
如果您想知道為什么您的代碼不起作用，請查看textArea已經包含文本區域值的變數。然后查看您嘗試從字串中獲取引數值的條件。
uj5u.com熱心網友回復：
您可以嘗試以下方法。在表單上添加一個onSubmit事件并洗掉所有其他事件。formValidation()在函式內添加一個 if 條件，如下所示。
if (!textArea.value) {
alert("please enter more information");
}
現在，當所有其他輸入欄位都已填滿并且只有 textarea 為空時，它將顯示警報訊息。
注意：只有在姓名、號碼和電子郵件欄位中有一些欄位時才會顯示警報訊息
作業代碼：
function formValidation() {
const form = document.getElementById("contactForm");
const textArea = document.getElementById("textArea").value;
if (!textArea.value) {
alert("please enter more information");
}
}<form action="" class="contactForm" method="POST" id="contactForm" onSubmit="formValidation()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="number">Number:</label>
<input type="number" id="number" name="number" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<textarea id="textArea" rows="3" cols="23" name="finalMessage " form="contactForm" placeholder="Enter your fitness goals..."></textarea><br>
<button id="buttonID">Submit</button>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/453243.html
標籤：javascript html 形式 验证
上一篇：使用來自兩個陣列的值創建陣列組合
下一篇：列出例外