0

JavaScript を使用してフォームを検証しようとしていますが、フォームが検証されない場合、フォームを「アクション」ページに送信したくありません。

バリデーター:

<script>
    function formSubmit()
    {
    document.getElementById("signup_form").submit();
    var x=document.forms["signup_form"]["tname"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }
    }
</script>

フォーム自体:

<form action="some_file.php" method="post" id="signup_form" name="signup_form" onsubmit="return formSubmit()">

ただし、tname フィールドが空の場合、アラートが返されますが、ユーザーが [OK] をクリックするとすぐに、フォームは some_file.php にリダイレクトされます。ここで何を見逃したのですか？

送信ボタン:

<a href="" onclick="return formSubmit(); return false" class="purplebutton">Signup</a>

それで、私は何を逃したのですか？今後これを回避するにはどうすればよいですか？

4

7 に答える 7

3

ステートメントの実行が間違っています。検証前にフォームを送信しています。このステートメントを if ステートメントの下に移動します

document.getElementById("signup_form").submit();

これにさらに。formSubmit()2 か所で呼び出していますが、 formtag とatag は 1 回で十分です。

更新されたコード:

<html>
<head>
    <title></title>
    <script>
    function formSubmit()
    {

    var x=document.forms["signup_form"]["tname"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }
      document.getElementById("signup_form").submit();
    }
</script>
</head>
<body>
    <form action="some_file.php" method="post" id="signup_form" name="signup_form" onsubmit="return formSubmit()">
        <input type="text" name="tname" />
        <a href="" onclick="return formSubmit(); return false" class="purplebutton">Signup</a>
</body>
</html>

デモ

于 2012-12-02T04:57:52.663 に答える
1

あなたはすでにすべてのコードを持っていました。それは間違った実行の結果でした。

<script>
    function formSubmit()
    {
        var x=document.forms["signup_form"]["tname"].value;
        if (!x){
              alert("First name must be filled out");
              return false;
        }
        return true;
    }
</script>


<form action="some_file.php" method="post" id="signup_form" name="signup_form">
<a href="" onclick="return formSubmit();" class="purplebutton">Signup</a>
于 2012-12-02T05:03:07.120 に答える
1

これを試して：

function formSubmit()
{
    var x=document.forms["signup_form"]["tname"].value;
    if (x=="")
    {
         alert("First name must be filled out");
         return false;
    }
    return true;
}

*コードに加えた変更: * - formSubmit でフォームを送信する必要はありません。検証チェックを実行し、true送信を続行するか、falseそうでない場合は戻ります。

  • また、ケースをチェックする必要はありませんx == null。テキストボックスが空の場合、その値は "" になります。

  • ただし、x にスペースだけが含まれていないことを確認する必要があるかもしれません。古いブラウザーのサポートを気にしない場合は、新しい Javascript トリム機能を使用できます。下位互換性が気になる場合は、提供されている多くの JavaScript ライブラリのいずれかを試すかtrim、次のいずれかを試してください。

function formSubmit()
{
    var x=document.forms["signup_form"]["tname"].value.replace(/^\s+|\s+$/g, '');
    if (x=="")
    {
         alert("First name must be filled out");
         return false;
    }
    return true;
}

スペースの送信を避けたい場合は、var x=ビットをそのままにして、チェックで置換を追加しif(x.replace(/\s/g, '') == "")ます。ただし、ユーザーが「 user1 」または「 user1 」と入力するとフォームが「 user1 」を送信するように、入力をトリミングしたいとも考えています。

ここで動作する 3 つの異なるバージョンのバージョンを確認できます: http://jsfiddle.net/9LPfb/2/ http://jsfiddle.net/9LPfb/3/ http://jsfiddle.net/9LPfb/6/

于 2012-12-02T05:04:17.777 に答える
1

関数でこの行を削除するだけです

 document.getElementById("signup_form").submit();

if条件の後に追加します

または、以下のように関数を書き換えます

function formSubmit()
    {
    var x=document.forms["signup_form"]["tname"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }else
         return true;
    }
于 2012-12-02T04:57:58.700 に答える
1

プログラムの流れに問題があります。
フォームを送信する前に検証を行います。
送信後に検証する必要はありません。間違って作成したと思います。検証後に送信するだけです。

于 2012-12-02T05:00:01.680 に答える
1

試す：

function formSubmit() {

    var x=document.forms["signup_form"]["tname"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
    }
   else {
      return true;
   }
}
于 2012-12-02T05:00:50.837 に答える
-1

お問い合わせフォーム

  function empty()  {   
     var x,y;

         x = document.forms["ff"]"name"].value; 
         y = document.forms["ff"]["surname"].value;

      if(x=="" ||x==null){
        alert("Enter your name");
        return false;
      }else if(y==""){
        alert("Enter your surname");
        return false;
      }else{
       alert('Data is sending');
       return true;
      } 
   };

HTMLで：

  <form method="POST" action="formdata.php" name="ff"onsubmit="return empty()">
    <table>
       <tr>
          <td>Enter Your Name : <input type="text" name="name" maxlength="30" size="40" id="na" ></td>
       </tr>
       <tr>
         <td>Enter Your Surname : <input type="text" name="surname" maxlength="30" size="40" id="sna"></td>
     </tr>
     <tr>
       <td>
         <input type="submit" name="formsubmit" value="submit" >
       </td>
    </tr>
  </table>
</form>
于 2015-06-09T11:53:52.927 に答える