JavaScript：表单未使用 OnSubmit 验证答案

【问题标题】：JavaScript: Form not validated with OnSubmitJavaScript：表单未使用 OnSubmit 验证
【发布时间】：2016-11-02 05:16:55
【问题描述】：

我是 JavaScript 新手。我有一个未使用警报按钮验证的表单。我有一个要正确提交的表格。如果我提交带有空字段的表单，应该会弹出一条警告消息。以下是我的代码：

function validate_Form() {
  alert('hi how');
  exit;
  var tokenNo = document.forms["myForm"]["txt1"].tokenNo;
  if (tokenNo == null || tokenNo == "") {
    alert("Enter The Token No");
    return false;
  } else {
    document.write("pola");
  }
}

<table>
  <form name="Sec_guard_form" onsubmit="validate_Form()">
    <tr>
      <td>Token No</td>
      <td>
        <input type="text" value="" name="token_no" />
      </td>
    </tr>
    <tr>
      <td>Other Property</td>
      <td>
        <input type="text" value="" name="other_prop" />
      </td>
    </tr>
    <tr>
      <td>Bike Number</td>
      <td>
        <input type="text" value="" name="bike_no" />
      </td>
    </tr>
    <tr>
      <td>bike name</td>
      <td>
        <input type="text" value="" name="bike_nm" />
      </td>
    </tr>
    <tr>
      <td>bike model</td>
      <td>
        <select option="bike model">
          <option value="Activa 3G">Activa 3G</option>
          <option value="shine">shine</option>
          <option value="unicon">unicon</option>
          <option value="yuga">yuga</option>
          <option value="neo">neo</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" value="submit" />
      </td>
      <td>
        <input type="submit" value="cancel" />
      </td>
    </tr>
  </form>
</table>

以上是我的代码，因为我使用 mozilla firefox 作为我的浏览器。是不是一个问题。我在脚本中的函数甚至没有被调用。我怎么了……

【问题讨论】：

在<form 标签中使用return validate_Form()，并将您的脚本移动到页面末尾
从您的代码中删除退出...javascript中没有退出命令
好的，我会从中删除退出，但是如何从 javascript 中的特定行退出以进行测试？
使用return语句

标签： javascript firefox

【解决方案1】：

你可以像这样改变你的javascript：

function validate_Form() {
   var form = document.querySelector("form");
   var tokenNo = form.elements.token_no.value;
   if (tokenNo == null || tokenNo == "") {
     alert("Enter The Token No");
     return false;
   } else {
     document.write("pola");
   }

   return false;
}

你的html是这样的：

<form name="Sec_guard_form" onsubmit="return validate_Form()">

退出；在javascript中没有任何意义。你必须使用返回。因此，如果您在函数执行任何操作之前返回，那么它根本就没有用！
根据我的说法，您用于选择表单元素并获取其值的语法是错误的，因此我更正了语法...
另外，您可能想知道为什么在 HTML 中使用 return validate_form() 并在函数中返回 false。它仅用于在整个函数执行之前停止页面刷新/重定向！

试试这个代码，它对我有用……我不知道你好，所以我把它去掉了。

【讨论】：

【解决方案2】：

你没有在你的提交按钮上调用函数请先用它来调用函数。

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

【讨论】：

【解决方案3】：

改变

<form name="Sec_guard_form" onsubmit="validate_Form()">

到

<form name="Sec_guard_form" onsubmit="return validate_Form()">

【讨论】：

我给了 return validate_form()，但什么也没发生

【解决方案4】：

完整的html代码

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<table>
 <form id="Sec_guard_form" onsubmit="return validate_Form();" method="post">
    <tr>
      <td>Token No</td>
      <td>
        <input type="text" value="" name="token_no" />
      </td>
    </tr>
    <tr>
      <td>Other Property</td>
      <td>
        <input type="text" value="" name="other_prop" />
      </td>
    </tr>
    <tr>
      <td>Bike Number</td>
      <td>
        <input type="text" value="" name="bike_no" />
      </td>
    </tr>
    <tr>
      <td>bike name</td>
      <td>
        <input type="text" value="" name="bike_nm" />
      </td>
    </tr>
    <tr>
      <td>bike model</td>
      <td>
        <select option="bike model">
          <option value="Activa 3G">Activa 3G</option>
          <option value="shine">shine</option>
          <option value="unicon">unicon</option>
          <option value="yuga">yuga</option>
          <option value="neo">neo</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" value="submit" />
      </td>
      <td>
        <input type="submit" value="cancel" />
      </td>
    </tr>
  </form>
</table>
<script>

  function validate_Form() 
    {   alert('hi how');
            var tokenNo = document.getElementById("Sec_guard_form")["token_no"].value;

            if (tokenNo == null || tokenNo  == "")
        {
            alert("Enter The Token No");
            return false;
        }
            else
        {
            document.write("pola");
        }

}

</script>
</body>
</html>

一切正常

【讨论】：

我已经编辑了代码并添加了完整的代码，并且在 firefox 中运行良好