Question

我正在尝试使用JavaScript代码验证此表单的所有元素，但由于某种原因，选择框未经过验证。用户可以填写除选择框之外的所有空格，并且JavaScript不会捕获它。关于我缺少什么的任何想法？谢谢。

<script type="text/javascript">
function validateForm() {
var ageErr = document.getElementById('ageErr');
var nameErr = document.getElementById('nameErr');
var radioErr = document.getElementById('radioErr');
var results = document.getElementById('results');
var theName = document.formContact.theName;
var theAge = document.formContact.theAge;
var theRadioGp = document.formContact.contact;
var theSelect = document.formContact.theSelect;
var chkValue;
if(theName.value =="") {
   nameErr.innerHTML = "A name is required ";
   theName.focus();
   return false;
}else {
   nameErr.innerHTML= "";
}
if(theAge.value ==""){
   ageErr.innerHTML = "An age is required";
   theAge.focus();
   return false;
}else {
   nameErr.innerHTML = "";
}
if(theAge.vale =="") {
   age.Err.innerHTML = "An age is required";
   theAge.focus();
   return false;
} else if (isNaN(theAge.value)) {
   ageErr.innerHTML = "Age should be a number";
    theAge.select();
} else if (theAge.value < 3 || theAge.value > 120) {
   ageErr.innerHTML = "Please enter your real Age";
   theAge.select();
   return false;
} else{
    ageErr.innerHTML = "";
}
for(var i=0; i < theRadioGp.length; i++) {
   if(theRadioGp[i].checked ==true) {
   chkValue = theRadioGp[i].value;
   }
}
if(chkValue == undefined) {
   alert('You need to slect a method of contact');
   return false;
 }
if(theSelect.options[theSelect.selectedIndex].text == "<--PLEASE SELECT ONE-->")
{alert("You need to select an option");
   return false;
  }else {
    alert("Your have selected "+theSelect.options[theSelect.selectedIndex].text);
  }
  alert("Your form has been completed. Great Job!!");
 }

</script>
</head>
<body>
<form action="" id="formContact" method="post" onsubmit="return validateForm();" name="formContact">
 <p>Name:<br />
    <input type="text" name="theName"><span class="err" id="nameErr"></span>
 </p>
 <p>Age:<br />
    <input type="text" name="theAge"><span class="err" id="ageErr"></span>
 </p>
 <p>
 <p>How may we contact you?<br>
    <input type="radio" name="contact" value="email">Email<br>
    <input type="radio" name="contact" value="no contact">No Contact<br>
 </p>
 <p>Please coose a selection below:<br>
   <select name="theSelect">
      <option>&lt;--PLEASE SELECT ONE --&gt;
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
</p>
 <p><input type="submit" value="Submit" name="btnSubmit" ">

</form>

<span id="results"></span>
</body>
</html>

Answer 1

您的HTML无效。用以下

替换您的选择部分

<select name="theSelect">
    <option>&lt;--PLEASE SELECT ONE--&gt;</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

或使用数值作为默认选项

<select name="theSelect">
    <option value="0">PLEASE SELECT AN OPTION</option>
    <option value="1">One</option>
    ...
</select>

并检查值（不是所选文本）

if(theSelect.options[theSelect.selectedIndex].value == 0){
    alert("You need to select an option");
    return false;
}else {
    alert("Your have selected " + theSelect.options[theSelect.selectedIndex].text);
}

Answer 2

为什么不在没有文字的情况下使用selectedIndex？

示例：

<select id="mytest">
 <option value="-1"><--PLEASE SELECT ONE--></option>
 <option value="1">Test One</option>
 <option value="2">Test Two</option>
</select>

然后

if(theSelect.selectedIndex == -1)
{alert("You need to select an option");
   return false;
  }else {
the rest

JavaScript表单验证不完全正常

2 个答案: