[英]Simple Form Validation to Check Empty Inputs and Display Message
我正在嘗試一個簡單的表單驗證，如果輸入字段為空，用戶將看到一條消息，要求填寫任何空字段。
我能夠循環並找到哪些字段為空並顯示消息，但該消息將僅顯示循環的最后一個輸入字段。 如何讓消息顯示所有空的輸入字段？
HTML：
<label>Name</label>
<input class=formInput" name="name" />
<label>Email</label>
<input class=formInput" name="email" />
<label>Message</label>
<textarea class=formInput" name="message" />
<span id="fail-message"></span>
JS：
let inputFields = document.getElementsByClassName('formInput');
for (var i = 0; i < inputFields.length; i++) {
if (inputFields[i].value === '') {
document.querySelector('#fail-message').innerHTML =
'Please fill out ' +
inputFields[i].getAttribute('name') +
' field(s)';
}
}
目前輸出“請填寫消息字段”
假設一切都是空的，我希望它輸出“請填寫姓名，電子郵件和消息字段”
每次找到空字段時，您都會完全覆蓋innerHTML代碼。 你應該做的是保留所有空字段的數組，然后只在循環后寫一次innerHTML，並找到它找到的字段列表。
let inputFields = document.getElementsByClassName('formInput');
const emptyFieldNames = [];
for (var i = 0; i < inputFields.length; i++) {
if (inputFields[i].value === '') {
emptyFieldNames.push(inputFields[i].getAttribute('name'));
}
}
if (emptyFieldNames.length > 0) {
document.querySelector('#fail-message').innerHTML = 'Please fill out the following fields: ' + emptyFieldNames.join(', ');
}
您在每次迭代中覆蓋消息范圍的innerHTML。 您應該將新錯誤連接到它或使用單獨的跨度。
您必須構建一個包含無效字段名稱的數組...現在，您使用最新字段“覆蓋”＃fail-message元素的innerHTML（也就是說，它是INSIDE你的循環，每個都要重寫在循環中滿足條件的時間）。
在數組中添加字段的名稱（不要重寫整個數組），然后使用“yourArray.join（）”輸出正確元素的innerHTML中的所有名稱，就像在循環中一樣。
每次循環時都要替換span元素中的值。 因此，只有最后一個空表單元素將顯示為失敗消息。 相反，您必須連接每個字符串，然后一起顯示它。
以下是適合您的完整代碼：
<html>
<head>
<script>
function myFunction() {
let inputFields = document.getElementsByClassName('formInput');
let message ='';
for (var i = 0; i < inputFields.length; i++) {
console.log(inputFields[i].value);
if (inputFields[i].value === '') {
message = message + inputFields[i].getAttribute('name') + ', ';
}
}
let n = message.lastIndexOf(",");
message = message.substring(0,n);
document.querySelector('#fail-message').innerHTML =
'Please fill out ' +
message +
' field(s)';
}
</script>
</head>
<body>
<label>Name</label>
<input class="formInput" name="name" />
<label>Email</label>
<input class="formInput" name="email" />
<label>Message</label>
<textarea class="formInput" name="message"> </textarea>
<button onclick="myFunction()">Submit</button>
<span id="fail-message"></span>
</body>
</html>
檢查表單輸入是否為空，如果不是，則在按下提交按鈕時顯示隱藏的 div
[英]Check if form inputs are empty and if not, display a hidden div on submit button press
如何檢查表單中所需的單選和復選框輸入，然后在選中或未選中時顯示消息？
[英]How to check for required radio and checkbox inputs in a form and then display a message if they're checked or unchecked?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.