javascript - <select> 为空/无选择或默认时显示错误消息

Question

I'm trying to get an error message when select is set to default and nothing is selected.对于输入字段，代码有效，但我无法弄清楚选择部分哪里错了。有人帮我吗？
fiddle :https://jsfiddle.net/snake93/1sLtk2a7/2/

//Error Msg for input field
function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
alert("Name must be filled out");
return false;
  }
}

<input type="text" name="fname" form="myForm">
<select id="select-sex" form="myForm" name="radios"> 
 <option id="opt-default" form="myForm" selected>Select...</option>
 <option id="sexuomo" name="radios" value="Male" form="myForm">Uomo</option>
 <option id="sexdonna" name="radios" value="Female" form="myForm">Donna</option>
</select>


<button onclick="validateForm()">Submit</button>
<form name="myForm" id="myForm" onsubmit="return validateForm()" method="post">
</form>

Answer 1

只需重复您在 input 上使用的逻辑即可为 select :

//Error Msg for input field
function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
  let y = document.forms["myForm"]["radios"].value;
  if (y == "Select...") {
    alert("Select must be filled out");
    return false;
  }
}

<input type="text" name="fname" form="myForm">
<select id="select-sex" form="myForm" name="radios">
  <option id="opt-default" form="myForm" selected>Select...</option>
  <option id="sexuomo" name="radios" value="Male" form="myForm">Uomo</option>
  <option id="sexdonna" name="radios" value="Female" form="myForm">Donna</option>
</select>


<button onclick="validateForm()">Submit</button>
<form name="myForm" id="myForm" onsubmit="return validateForm()" method="post">
</form>

但是，一个更具可扩展性的解决方案是添加 required字段到您的输入，然后使用 checkValidity() :

function validateForm(){
  const isValid = myForm.checkValidity();
  if(!isValid){
    alert("Please fill all fields");
  }
  return isValid;
}

<form name="myForm" id="myForm" onsubmit="return validateForm()" method="post" novalidate>
  <input type="text" name="fname" form="myForm" required>
  <select id="select-sex" form="myForm" name="radios" required>
    <option id="opt-default" value="" form="myForm" selected disabled>Select...</option>
    <option id="sexuomo" name="radios" value="Male" form="myForm">Uomo</option>
    <option id="sexdonna" name="radios" value="Female" form="myForm">Donna</option>
  </select>
  <button>Submit</button>
</form>