3

作成した単純な html ログイン ページに問題があります。無効な認証情報を使用してログイン フォームを送信すると、検証メソッドが「return false」コマンドを実行しているにもかかわらず、フォームが送信されます。この質問がここで何度も聞かれていることは知っていますが、それらの質問に対する回答はどれも役に立ちませんでした.

私のhtmlフォームは次のとおりです。

<form onSubmit="return validateForm();" method="get" action="TestPage.html">
    <div id="centralPoint" class="frame">
        <select id="centralPointSelect" data-inline="true" data-mini="true" data-native-menu="false" name="centralPoint"></select>
    </div>
    <div id="credentialsFrame" class="frame">
        <input id="userField" type="text" name="Username" />
        <input id="passField" type="password" name="Password" />
    </div>
    <div id="errorMsg"></div>
    <input id="loginBtn" type="submit" value="Login" />
    <div id="rememberMe" class="frame">
        <input type="checkbox" id="checkbox-1" class="custom" data-mini="true" name="rememberMe" />
        <label for="checkbox-1">Keep me signed in</label>
    </div>
    <div id="forgotPassFrame">
        <input id="forgotPass" type="button" data-mini="true" value="Forgot password?" />
    </div>
</form>

そして、これが私のjavascriptメソッドです。ここにある唯一のコード行が「return false;」であっても注意してください。フォームは引き続き送信されます。また、firebug をチェックインして、メソッドが実際に呼び出され、実際に false を返していることを確認し、すべてチェックアウトしました。

function validateForm()
{
    var usernameTxt = $("#userField").attr("value");
    var passwordTxt = $("#passField").attr("value");

    if (usernameTxt == "" || passwordTxt == "" || (usernameTxt == userLbl && passwordTxt == passLbl))
    {
        $("#errorMsg").html("Please enter a username and password.");
        return false;
    }
}

私が見逃していることは本当に明らかですか？html フォーム タグで確認できる以外の方法で onsubmit イベントをバインドしたり、送信ボタンにクリック ハンドラーを割り当てたりしません。

私がJQueryモバイルを使用していることが関連している可能性があります.これが私のフォームで何かをしている可能性はありますか?

4

2 に答える 2

5

フォームの送信を自分で処理する場合は、data-ajax="false"属性を<form>タグに追加して、jQueryMobileがそれをそのままにしておく必要があります。

フォーム送信がAjaxで自動的に処理されないようにするdata-ajax="false"には、フォーム要素に属性を追加します。ajaxEnabledグローバル構成オプションを使用して、Ajaxフォーム処理を完全にオフにすることもできます。

ソース： http： //jquerymobile.com/demos/1.1.0/docs/forms/forms-sample.html

これがあなたのフォームのデモですが、上記の属性が追加されています：http: //jsfiddle.net/XtMw9/

これを行うと、フォームを手動で送信する必要があります。

function validateForm()
{
    var usernameTxt = $("#userField").val();
    var passwordTxt = $("#passField").val();//notice the use of .val() instead of .attr()

    if (usernameTxt == "" || passwordTxt == "" || (usernameTxt == userLbl && passwordTxt == passLbl))
    {
        $("#errorMsg").html("Please enter a username and password.");
        return false;
    }

    var $form = $('form');
    $.ajax({
        url     : $form.attr('action'),
        type    : $form.attr('method'),
        data    : $form.serialize(),
        success : function (response) { ... },
        error   : function (a, b, c) { console.log(b); }
    });
}

説明

これが機能するのは、デフォルトでjQueryMobileがAJAXを介して任意のフォームを送信しようとするためです。属性を使用して、data-ajax="false"jQuery Mobileに特定のフォームをそのままにして、自分で送信できるようにすることができます。

于 2012-06-18T16:12:19.133 に答える
0

validateForm() 関数では、2 つの未定義変数 ( userLblとpassLbl ) を使用しました。変数の値を定義してチェックします。

于 2012-06-18T16:13:57.607 に答える