select选项的验证无效

validation for select option not working

本文关键字：无效 验证 选项 select      更新时间：2023-09-26

我为一个小项目编写了一个表单，在验证select选项时遇到了问题希望有人能帮助

THanks in advanced

HTML:

<form method="post" name="vehicleform" action=" " onSubmit="return (validateForm())">
First Name: <input type="text" name="fname"><br>
Last Name: <input type="text" name="lname"><br>
Phone Number <font size="1px">(ex. 123-456-7890)</font>: <input type="text" name="phonenumber"><br>
Location 
<select name="location">
  <option value="-1">Select one..</option>
  <option value="lota">Lot A</option>
  <option value="lotb">Lot B</option>
  <option value="lotc">Lot C</option>
</select><br>

JS:

function validateForm(){
  var d = document.forms['vehicleform']['location'].value;
  if( document.vehicleform.location.value == "-1" )
  {
    alert("Please select your location");
    return false;
  }
}

侦听器中不需要分组，通过this可以立即访问表单：

<form ... onsubmit="return validateForm(this)">

你只需要检查所选的索引，看看是否选择了第一个选项以外的其他选项(或没有全部选项(：

function validateForm(form) {
  if (form.location.selectedIndex < 1) {
    alert("Please select your location");
    return false;
  }
}

正如评论中所建议的，默认选择第一个选项：

<select name="location">
  <option value="-1" selected>Select one..
  <option value="lota">Lot A

因为浏览器可能不会默认选择任何选项，用户也不会看到"选择一个…"。无论如何，这应该是一个标签，以帮助访问。

http://jsfiddle.net/LVBSZ/1/

你的代码中没有提交按钮，表单的关闭标签。其他适用于我

<script>
    function validateForm() {
        if (document.forms['vehicleform'].location.value == "-1") {
            alert("Please select your location");
            return false;
        }
    }
</script>
<form method="post" name="vehicleform" onSubmit="return validateForm()">
    First Name:
    <input type="text" name="fname">
    <br>Last Name:
    <input type="text" name="lname">
    <br>Phone Number <font size="1px">(ex. 123-456-7890)</font>:
    <input type="text" name="phonenumber">
    <br>Location
    <select name="location">
        <option value="-1">Select one..</option>
        <option value="lota">Lot A</option>
        <option value="lotb">Lot B</option>
        <option value="lotc">Lot C</option>
    </select>
    <br>
    <input type="submit" value="Submit">
</form>
相关文章：