-1

私はhtmlフォームを持っています:

<form method="POST" action="MyServletName1" enctype="multipart/form-data">
    //Other html code
    <input type="submit" value="Next" onclick="return Check();"/>
</form>

ユーザーがテキストフィールドにIDを入力したかどうかを確認する簡単な検証を行うチェック機能は次のとおりです。ユーザーがテキストフィールドに値を入力した場合は、上記のフォームを送信するtrueを返します。

function Check()
{
    var myID = document.getElementById('myID').value;
    if(myID!=null && myID.length>0)
        return true;
    else
    {
        alert('Please enter ID!');
        return false;
    }
}

上記の関数は正常に動作します。このIDがすでに存在するかどうかをデータベースで確認したいと思います。IDが存在する場合、フォームを送信したくありません。

したがって、Check() 関数は次のようになります。

function Check()
{
    var myID = document.getElementById('myID').value;
    if(myID!=null && myID.length>0)
    {
        $.post('MyServletName2',{ action: "checkID",myID:myID}).done(function(data) 
        {
            if(data=="OK")
                return true;
            else
            {
                return false;
                alert(data);
            }
        }
    }
    else
    {
        alert('Please enter ID!');
        return false;
    }
}

ユーザーがIDを入力すると、リクエストがサーブレットに送信されますが、サーブレットが他の値を返してもフォームが送信されるようになりましたOK

任意の提案をいただければ幸いです。

4

3 に答える 3

1

このようなことを試してください

    $.ajax({
        url: 'MyServletName2',
        data : { action: "checkID",myID:myID},
        async: false,
        }).done(function() {
            if(data=="OK"){
                   return true;
            }
               else
               {
                   return false;

               }
        });

デフォルトでは、すべてのリクエストは非同期で送信されます (つまり、これはデフォルトで true に設定されています)。同期リクエストが必要な場合は、async オプションを false に設定します。

ajax が応答を受け取る前にフォームが送信されるため、フォームは検証されません。

于 2013-11-08T05:29:46.763 に答える
1

投稿は非同期です。したがって、非同期投稿が完了するまで、メソッドは false を返しません。このため、フォームの投稿は正常に実行されます。

入力送信をボタンに変更するなど、おそらく何か他のことをする必要があります。次に、コールバックのボタンは、チェックをスキップしてフォームを投稿します。何かのようなもの...

<form method="POST" action="MyServletName1" enctype="multipart/form-data" id="form1">
    //Other html code
    <input type="button" value="Next" onclick="Check();"/>
</form>

ボタンを変更し、フォームにIDを追加しform1、onlickを変更したことに注意してください(リターンを削除しました)。

次のステップは、投稿の処理です。これは単純な変更です。

function Check()
{
    var myID = document.getElementById('myID').value;
    if(myID!=null && myID.length>0)
    {
        $.post('MyServletName2',{ action: "checkID",myID:myID}).done(function(data) 
        {
            if(data=="OK")
                document.getElementById('form1').submit();
            else
            {
                alert(data);
            }
        }
    }
    else
    {
        alert('Please enter ID!');
    }
}

実際の変更は、 を削除しreturn false \ trueて追加しただけであることに注意してください。

document.getElementById('form1').submit();

フォームを手動で送信するには..これは単なるオプションです。これがお役に立てば幸いです。

于 2013-11-08T05:31:02.903 に答える
1
function Check()
{
    var myID = document.getElementById('myID').value;
    var valid = false;
    if (myID != null && myID.length > 0)
    {
        $.ajax({
            url: 'MyServletName2',
            data: {action: "checkID", myID: myID},
            async: false,
            success: function() {
                if (data == "OK") {
                    valid =  true;
                }
                else
                {
                   valid = false;
                }
            }
        });
        return valid;
    }
    else
    {
        alert('Please enter ID!');
        return false;
    }
}
于 2013-11-08T05:33:15.203 に答える