Question

我有一个用JavaScript编写的表单，在我提交时可以正常工作。但是，有一个条件，我想在用户点击提交按钮之前验证。如果用户在下拉菜单中选择“无”，我希望在用户尝试提交之前禁用其他下拉菜单和文本框。这是我到目前为止所做的，但每次选择“无”时似乎都没有发生：

<form name="my_form" onsubmit="return submit()" action="/test" method="post">

<select id="month">
   <option value="None">None</option>
   <option value="0">January</option>
   <option value="1">February</option>
   <option value="2">March</option>
   <option value="3">April</option>
   <option value="4">May</option>
   <option value="5">June</option>
   <option value="6">July</option>
   <option value="7">August</option>
   <option value="8">September</option>
   <option value="9">October</option>
   <option value="10">November</option>
   <option value="11">December</option>
  </select>


<select id="day">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
   <option value="7">7</option>
   <option value="8">8</option>
   <option value="9">9</option>
</select>

<input type="text" name="year" placeholder="Year" />
<input type="submit" value="Submit" />

</form>

<script>


function submit(){

var get_month_value = month.options[month.selectedIndex].text;

if(get_month_value == "None"){
      document.getElementById("year").disabled = true;
      document.getElementById("day").disabled = true;
      return false;
    }


    else if(year == ""){
      alert("Year must be filled out");
      return false;
    }

</script>

我在哪里错了？任何帮助，将不胜感激。感谢。

Answer 1

给表单ID并删除onsubmit函数：

<form id="my_form" name="my_form" action="/test" method="post">

将提交按钮放在表单外，然后添加onclick功能：

<input type="submit" value="Submit" onclick="submit();" />

将year文本字段设为ID：

<input type="text" id="year" name="year" placeholder="Year" />

<强>使用Javascript：

function submit() {
    var select = document.getElementById("month");
    var get_month_value = select.options[select.selectedIndex].value;
    var year = document.getElementById('year').value;

    if ((get_month_value == "None") || (year == "")) {
        alert("Please fill out the required fields");
    } else {
        document.getElementById("my_form").submit();
    }
}

<强> DEMO

Answer 2

您的代码有以下错误： -

1）首先，您不能在表单属性中提供函数名称submit。

2）你在最后一个职能中缺少}。

3）您的输入文字应该id=year而不是name。

4）未定义月份。

5）年份没有定义。

更改 HTML中的这些行： -

<form name="my_form" onsubmit="return validateForm()" action="/test" method="post"> <input type="text" id="year" placeholder="Year" />

使用Javascript： -

function validateForm(){ var month = document.getElementById('month'); var year = document.getElementById('year').value; var get_month_value = month.options[month.selectedIndex].text; if(get_month_value == "None"){ document.getElementById("year").disabled = true; document.getElementById("day").disabled = true; return false; } else if(year == ""){ alert("Year must be filled out"); return false; } }

Answer 3

HTML5日期选择器＆＃34; 必需＆＃34;属性（作品）：

<form id="dateForm" name="dateForm" action="/test" method="post">
  Date: <input type="date" name="date" required />
  <input type="submit" />
</form>

下拉列表不需要JScript和html。

<强> DEMO

提交前表单未验证（JavaScript）

3 个答案: