0

送信したいフォームがあるので、送信をクリックすると、selectorpage.php に移動し、選択した関数の種類 (ログインなど) を見つけて、さらにコントローラーを呼び出して関数を実行します。私が抱えている問題は、js に validateForm() という関数があり、送信ボタンをクリックするとすぐに selectorPage.php に移動することです。フォームの送信を停止し、js を介して検証を実行し、そこからフォームを送信したかったので、onsubmit = return false; を使用しました。フォームタグに含まれていますが、それ以上のことを行うフォームをブロックするだけです。また、jsで何らかの形で機能する場合、フォームをselectorPageにリダイレクトする方法もわかりません。js からフォームを送信し、そのページを selectorPage.php にリダイレクトする方法を教えてください。ありがとう

<form method="post" action="selector.php?type=login" id="login" id="loginForm">
      <div class="row">
           <div class="offset1 span1">            
                <div class="lbel">
                     <label class="control-label" for "loginName">
                          Username/Email
                     </label>
                </div>
                <div class="lbl_inpuCnt">
                      <input type="text" class="input-xlarge" id="loginName"
                             name="loginName" maxlength="50"/>
                </div>
                <div id="usernameError">&nbsp;</div>
                <div class="lbel">
                      <label class="control-label" for="loginPassword">
                             Password
                      </label>
                </div>
                <div class="controls">
                       <input type="password" class="input-xlarge" 
                               id="loginPassword" name="loginPassword" 
                                maxlength="50"/>
                </div>
                <div id="passwordError">&nbsp;</div><br/>
            </div>
       </div>
       <div style="margin-left: 55px;">
           <input class="btn" style="width: 80px;" type="reset" 
                    name="reset" value="Reset"/>
           <input class="btn" style="width: 80px;" type="submit" 
                    name="submit" value="Login" onclick="validateForm();"/>
       </div>
 </form>

これは、上記のコードによる JavaScript です。

function validateForm(){
    form = document.forms['loginForm'];
    if(document.getElementById('loginName').value == "")
        document.getElementById('usernameError').innerHTML = 'Invalid username or email';
    else{
        document.getElementById('usernameError').innerHTML = "&nbsp";      
    form.submit();
    }
} //suppose it for the email validation only for the time being
4

4 に答える 4

3

あなたは試すことができます

<form ... onsubmit="return validateForm();"

validateForm()関数の使用で

return true / false

エラーが見つかったかどうかによって異なります。

于 2012-07-15T06:29:43.900 に答える
2

これがインライン イベント処理を使用した標準的な方法です。また、フォームタグには1つのIDしかありません。また、予約語であるフォームで何も呼び出さsubmitないでください。スクリプトによる送信をブロックします（これはあなたがやろうとしたことです）

<form id="loginform" ... onsubmit="return validate(this)">

<div style="margin-left: 55px;">
  <input class="btn" style="width: 80px;" type="reset" name="reset" value="Reset" onclick="clearFields()"/>
  <input class="btn" style="width: 80px;" type="submit"  value="Login" />
</div>
</form>

これはジャバスクリプトです

function validateForm(form){ // passing form object
  document.getElementById('usernameError').innerHTML = ""; // reset

  if (form.loginName.value == "") {
    document.getElementById('usernameError').innerHTML = "Invalid username";
    return false;
  }
  return true;// allow submission
}

別

<form id="loginform" ..... No event handler here ...>

脚本：

window.onload=function() {
  document.getElementById("loginform").onsubmit=function() {
    document.getElementById('usernameError').innerHTML = ""; // reset

    if (this.loginName.value == "") { // notice the "this"
      document.getElementById('usernameError').innerHTML = "Invalid username";
      return false;
    }
    return true;// allow submission
  }
}
于 2012-07-15T09:17:58.867 に答える
0

私自身も過去にこれに似た問題を抱えていました。

フォームの「ログイン」ボタンをクリックすると、2 つの別々のイベントがトリガーされます。「validateForm();」の呼び出しです。javascript 関数、およびフォーム自体の送信。ここでの問題は、フォームを送信すると、ブラウザーがアウトバウンド要求をフォームターゲットに送り返すことであり、私の知る限り、JavaScript を使用して、トリガーされた要求イベントを強制終了する方法はありません。

'onsubmit=return false;' を使用すると、本来の動作が正確に行われている可能性があります - 現在の JavaScript スコープを終了します (したがって、その特定のイベントに関連付けられた JavaScript がさらに実行されるのを防ぎます)。ただし、残念ながら、フォーム自体の送信は、javascript を介してトリガーおよび制御することはできますが、実際には javascript によって処理されず、javascript 関数自体ではありません。

私の経験では、最良の解決策であることがわかったのは、「送信」タイプの入力の代わりに「ボタン」タイプの入力を使用することです。「送信」と「ボタン」の両方がボタンとして表示されますが、「ボタン」実際には、デフォルトの固有の関連付けられたイベントアクションはありません（したがって、クリックしても実際には何もしません）-これが意味することは、イベントハンドラーを介して（「onclick」など、あなたが行ったように） 、ユーザーが「ボタン」をクリックしたときに何が起こるかを完全に制御できます。

「validateForm();」が含まれていません ここには javascript 関数が含まれているため、何が含まれているかはわかりませんが、まだ含まれていない場合は、その javascript 関数を介してフォームを送信するコードを含め、検証が成功したらフォームを送信します (または検証が失敗した場合、人間が読めるエラーのようなもの) - 「送信」の代わりに「ボタン」を使用することと組み合わせることで、問題が解決するはずです。

お役に立てれば。:)

編集：最初の返信をした直後にこれについて考えました。一部のブラウザーは、送信入力タイプを介してフォームを送信する前に、「onclick」などのイベント ハンドラーを処理します。ただし、特定の古いブラウザーでは現在これが行われていないことがわかりました (したがって、上記の投稿のコンテキスト)。フォーム送信前に処理されたイベント ハンドラーの結果を受け入れる新しいブラウザーの場合、検証が失敗した場合に 2 番目のイベント (フォーム送信) がまったく発生しないようにすることが可能です。ただし、すべてのブラウザーがこれらの結果を受け入れるわけではなく、結果に関係なくフォームを送信し続けるブラウザーもあることがわかりました。

于 2012-07-15T06:33:35.877 に答える
0

皆さんありがとうございました。最終的に、ここであなたのアイデアによる解決策を見つけました。機能私はそれをonclickイベントの送信に入れ、それは魅力のように動作します...ありがとう

<div style="margin-left: 55px;">
                    <input class="btn" style="width: 80px;" type="reset" name="reset" value="Reset" onclick="clearFields()"/>
                    <input class="btn" style="width: 80px;" type="submit" name="submit" value="Login" onclick="return validateForm();"/>
                </div>

これはジャバスクリプトです

function validateForm(){
    var form = document.forms['loginForm'];
    if(document.getElementById('loginName').value == "")
        document.getElementById('usernameError').innerHTML = 'Invalid username or email';
    else{
        form.submit();
    }
    return false;
}
于 2012-07-15T07:55:09.600 に答える