当我提交表单时，onsubmit 函数似乎不起作用

Question

您好，我尝试使用 onsubmit 属性调用函数，但没有任何反应。在这里，这只是一个测试，让功能正常工作，但我想验证 phone 数字是否正确。在我使用简单警报之前，但每次它都刷新页面，我不喜欢它，所以我搜索了一下，找到了“onsubmit”但不起作用.. 我做错了什么？我使用 JS 和 PHP。谢谢大家！

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Mon test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link href="/CSS/StyleAccueil.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <script type="text/javascript">
    function valide_GSM() {
      alert("Ca fonctionne");
      document.getElementById("txtGSM").focus();
      return false;
    }
  </script>
</head>

<body>
  <form method="post" onsubmit="return valide_GSM();">
    <table class="tableauInscription">
      <tr>
        <td colspan="2">
          <h3 style="text-align:center;">Formulaire d'inscription</h3>
        </td>
      </tr>

      <tr>
        <td class="coteGauche">Prenom :</td>
        <td><input type="TextBox" name="txtPrenom" CssClass="form-control" placeholder="Prenom"></td>
      </tr>

      <tr>
        <td class="coteGauche">Nom :</td>
        <td><input type="TextBox" name="txtNom" CssClass="form-control" placeholder="Nom"></td>
      </tr>

      <tr>
        <td class="coteGauche">Adresse email :</td>
        <td><input type="email" name="txtAdresseMail" CssClass="form-control" placeholder="Adresse email"></td>
      </tr>

      <tr>
        <td class="coteGauche">GSM min 7 :</td>
        <td><input type="TextBox" name="txtGSM" CssClass="form-control" placeholder="GSM" minlength="7"></td>
      </tr>

      <tr>
        <td class="coteGauche">Identifiant :</td>
        <td><input type="TextBox" name="txtIdentifiant" CssClass="form-control" placeholder="Identifiant"></td>
      </tr>

      <tr>
        <td class="coteGauche">Mot de passe : </td>
        <td><input type="Password" name="txtMotDePasse" CssClass="form-control" placeholder="Mot de passe"></td>
      </tr>

      <tr>
        <td class="coteGauche"></td>
        <td style="padding-left:33px; padding-top:10px; padding-bottom:10px;">
          <button type="submit" id="btnCreerCompte" class="btn btn-dark">Créer le compte</button></td>
      </tr>
    </table>
  </form>
</body>

</html>

Answer 1

问题是 document.getElementById("txtGSM").focus(); 抛出错误，因此您的函数永远不会到达 return false，这会阻止表单提交。

没有具有该 ID 的元素。您需要将该 ID 添加到该元素。

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Mon test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link href="/CSS/StyleAccueil.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <script type="text/javascript">
    function valide_GSM() {
      alert("Ca fonctionne");
      document.getElementById("txtGSM").focus();
      return false;
    }
  </script>
</head>

<body>
  <form method="post" onsubmit="return valide_GSM();">
    <table class="tableauInscription">
      <tr>
        <td colspan="2">
          <h3 style="text-align:center;">Formulaire d'inscription</h3>
        </td>
      </tr>

      <tr>
        <td class="coteGauche">Prenom :</td>
        <td><input type="TextBox" name="txtPrenom" CssClass="form-control" placeholder="Prenom"></td>
      </tr>

      <tr>
        <td class="coteGauche">Nom :</td>
        <td><input type="TextBox" name="txtNom" CssClass="form-control" placeholder="Nom"></td>
      </tr>

      <tr>
        <td class="coteGauche">Adresse email :</td>
        <td><input type="email" name="txtAdresseMail" CssClass="form-control" placeholder="Adresse email"></td>
      </tr>

      <tr>
        <td class="coteGauche">GSM min 7 :</td>
        <td><input type="TextBox" name="txtGSM" id="txtGSM" CssClass="form-control" placeholder="GSM" minlength="7"></td>
      </tr>

      <tr>
        <td class="coteGauche">Identifiant :</td>
        <td><input type="TextBox" name="txtIdentifiant" CssClass="form-control" placeholder="Identifiant"></td>
      </tr>

      <tr>
        <td class="coteGauche">Mot de passe : </td>
        <td><input type="Password" name="txtMotDePasse" CssClass="form-control" placeholder="Mot de passe"></td>
      </tr>

      <tr>
        <td class="coteGauche"></td>
        <td style="padding-left:33px; padding-top:10px; padding-bottom:10px;">
          <button type="submit" id="btnCreerCompte" class="btn btn-dark">Créer le compte</button></td>
      </tr>
    </table>
  </form>
</body>

</html>

当我提交表单时，onsubmit 函数似乎不起作用

The onsubmit function doesn't seems to work when I submit a form

javascript

php

onsubmit