表单提交时如何在select下拉框无有效选择时展示错误提示

• 现有validateForm校验函数仅针对姓名输入框做了逻辑判断，完全没有包含下拉选择框的校验规则，因此下拉框停留在默认选项时不会触发错误提示
• 下拉框的默认选项未设置空值属性，即使选中默认的「Select...」项，读取到的下拉框取值也会是「Select...」文本，无法直接判断用户是否选择了有效选项

1. 修改HTML中下拉框的默认选项，添加value=""属性，方便后续校验逻辑判断
2. 在校验函数中补充下拉选择框的校验规则

修复后完整代码 #

HTML代码 #

<input type="text" name="fname" form="myForm">
<select id="select-sex" form="myForm" name="radios"> 
 <option id="opt-default" form="myForm" selected value="">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>

JS代码 #

function validateForm() {
  // 校验姓名字段
  let nameVal = document.forms["myForm"]["fname"].value;
  if (nameVal == "") {
    alert("Name must be filled out");
    return false;
  }
  // 新增下拉选择框校验
  let selectVal = document.forms["myForm"]["radios"].value;
  if (selectVal == "") {
    alert("请选择性别");
    return false;
  }
}

内容的提问来源于stack exchange，提问作者Snake93