Question

我是JavaScript的新手。我有一个未通过警报按钮验证的表单。我正在提交一份没有错误的表格。如果我使用空字段提交表单，则应弹出警告消息。以下是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

以上是我的代码，因为我使用mozilla firefox作为我的浏览器。这是一个问题。我甚至没有调用脚本中的函数。我错在哪里......

Answer 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中没有任何意义。你必须使用return。因此，如果您在函数执行任何操作之前返回，那么它根本没用！
你用来选择表单元素并获取其值的语法是错误的，所以我更正了语法......
此外，您可能想知道为什么在HTML中使用return validate_form（）并在函数中返回false。它仅用于在整个函数执行之前停止页面刷新/重定向！

尝试这段代码，它对我有用......我不知道你是怎么回事，所以我把它消灭了。

Answer 2

您没有在提交按钮上调用功能请先使用此功能调用功能。

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

Answer 3

变化

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

到

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

Answer 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>

这很好用

JavaScript：未使用OnSubmit验证的表单

4 个答案: