Question

我正在为一个小项目做一个表单，并且在尝试验证select选项时遇到了麻烦希望有人可以提供帮助

提前谢谢

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;
  }
}

Answer 1

不需要在侦听器中进行分组，并且传递 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

由于浏览器默认情况下不会选择任何选项，因此用户不会看到＆＃34;选择一个...＆＃34;。无论如何，这应该是一个标签，以协助可访问性。

Answer 2

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>

验证选择选项不起作用

2 个答案: