如何使用JavaScript验证下拉列表

Question

当我在没有选择任何选项的情况下提交按钮时，我会显示错误。它有效。但当我选择任何选项后点击提交时，这里的问题仍然存在。如果选择了选项，我无法删除错误。

selected.Can anyone help me please
<form id="myForm">     
<select  id="logs" data-placeholder="Type here to find device"
name="tags[]"
multiple
class="chosen-select form-control"
required>
<option value=""></option>
<option value="ASA"     > ASA     </option>
<option value="ISE"     > ISE      </option>
<option value="Windows" > Windows  </option>
<option value="ATA"     > ATA      </option>
<option value="Alliance"> Alliance </option>
<option value="Proxy"   > Proxy    </option>
<option value="Csp"     > CSP      </option>
</select>
<button type="submit">Submit</button>
<p id="loggingError" style="color: red; font-size: small;"></p>
</form>

var logs = document.getElementById('logs');
var myForm = document.getElementById('myForm');
function loggingCheck(event)
{
if (logs.selectedIndex == 0 )
{
document.getElementById('loggingError').innerHTML="Please select at least one logging devices";
event.preventDefault();
}
else
{
document.getElementById('loggingError').innerHTML="";
}
}
myForm.addEventListener('submit',loggingCheck);

Answer 1

selectedIndex是-1而不是0

var logs = document.getElementById("logs");
var myForm = document.getElementById("myForm");

function setError(id, message) {
var error = document.getElementById(id);
if(error) {
error.innerHTML = message || "";
}
}
function loggingCheck(event) {
if (logs.selectedIndex < 0) {
setError("loggingError", "Please select at least one logging devices");
event.preventDefault();
} else {
setError("loggingError", "");
}
}
myForm.addEventListener("submit", loggingCheck);
logs.addEventListener("change", loggingCheck);

添加更改处理程序可以检测用户何时选择了select的某个选项。从那以后，我将重用您的loggingCheck方法，但如果您想验证表单的其余字段，请将其分解为一个单独的函数。

Answer 2

var logs = document.getElementById('logs');
var myForm = document.getElementById('myForm');
function loggingCheck(event) {
if (logs.value === '') {
document.getElementById('loggingError').innerHTML = "Please select at least one logging devices";
event.preventDefault();
} else {
document.getElementById('loggingError').innerHTML = "";
}
}
function changeCheck(event) {
if (event.target.value !== '') document.getElementById('loggingError').innerHTML = "";
else document.getElementById('loggingError').innerHTML = "Please select at least one logging devices";
}
myForm.addEventListener('submit', loggingCheck);
logs.addEventListener('change', changeCheck);

<form id="myForm">
<select data-placeholder="Type here to find device" id="logs" name="tags[]" multiple class="chosen-select form-control">
<option value="ASA">ASA</option>
<option value="ISE"> ISE</option>
<option value="Windows"> Windows</option>
<option value="ATA">ATA</option>
<option value="Alliance"> Alliance</option>
<option value="Proxy"> Proxy</option>
<option value="Csp"> CSP</option>
</select>
<button type="submit">Submit</button>
<p id="loggingError" style="color: red; font-size: small;"></p>
</form>

Answer 3

如果使用required属性并希望使用自己的消息，则必须管理reportValidity和setCustomValidity方法

const myForm = document.getElementById('my-form')
myForm['tags[]'].oninvalid = evt =>
{
evt.target.setCustomValidity('Please select at least one logging devices')
}
myForm.oninput = evt =>
{
//  if (evt.target.name==='tags[]') ...
evt.target.setCustomValidity('')
evt.target.reportValidity()
}
myForm.onsubmit = evt => // if the form has error the submit event doesn't happen
{
evt.preventDefault()
console.log('the form is now supposed to be submitted...')
setTimeout(() => { console.clear() }, 2000) // clear log about 2s;
}

input:invalid { border-color: crimson; }

<form id="my-form">
<select name="tags[]"  multiple required size="7">
<option value="ASA"     > ASA      </option>
<option value="ISE"     > ISE      </option>
<option value="Windows" > Windows  </option>
<option value="ATA"     > ATA      </option>
<option value="Alliance"> Alliance </option>
<option value="Proxy"   > Proxy    </option>
<option value="Csp"     > CSP      </option>
</select>
<button type="submit">Submit</button>
</form>