0

非常に奇妙な問題です。aspnetWeb形式のテキストボックスがあります。jqueryを使用してテキストボックスを検証します。検証に合格しなかった場合は、テキストボックスの横に赤い警告が表示されます。これまでのところ、ページの任意の場所をクリックして、テスト用に無効なテキストを入力するつもりだったとしたら、これで問題ありません。

私のコード:(更新済み）

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%=TextUserName.ClientID%>").blur(function () {
            ValidateUserNameAfterBlur();
        });
    });

    function ValidateUserName() {
        $.ajax({ type: "POST",
            url: "../UserNameWebService.asmx/ValidateUserName",
            data: "{'strUsername': '" + $("#<%=TextUserName.ClientID%>").val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (data) {
                return data;
            }
        });
    }

    function ValidateUserNameBeforeSubmitting() {
        isValid = ValidateUserName();
        return isValid;
    }

    function ValidateUserNameAfterBlur() {
        isValid = ValidateUserName();
        $('#TextUserNameError').toggle(!isValid);
    }



</script>

その他のマークアップコード：

 <td class="style4">
            <asp:TextBox ID="TextUserName" runat="server"></asp:TextBox>
        </td>
        <td>
            <span id="TextUserNameError" style="display:none; color:Red; font-weight:bold;">This is not a valid username</span>
        </td>

ただし、Webページにはasp.netボタンがあります。ボタンをクリックした後、エラーが表示されましたが、すぐに消えました。

ボタンのコード：

 <p>
    <asp:Button ID="btnSave" runat="server" Text="SaveChanges" OnClick="btnSave_Click"
        CssClass="saveButton" ValidationGroup="answer" OnClientClick="return ValidateUserNameBeforeSubmitting();" />
</p>

ポストバックが原因だと思いますが、手がかりはありません。専門家からの助けに感謝します。

追加画像 デバッグ

と data.d

4

1 に答える 1

1

あなたが正しいと思います。これは、ボタンをクリックすると（送信ボタンだと思いますか？）、ページがポストバックを実行するために発生しています。javascriptの検証が失敗したときにページがポストバックしないようにする簡単な方法は、javascript関数が「false」を返すようにすることです。これにより、ページがポストバックを実行できなくなります。

そうは言っても、なぜユーザー名の検証をdocument.clickに接続しているのかわかりません。値が変更されたかどうかに関係なく、ユーザーがページをクリックするたびにページが検証を実行するようです。

ユーザーが入力したテキストのクライアント側の検証を実行するために受け入れられている方法は、問題のコントロールがフォーカスを失ったときです。JQueryでは、これはになりますblur()。このように、検証は、ユーザーがコントロールの値の変更を終了したときにのみ実行されます。

これはあなたのボタンコードになります（注意してくださいOnClientClick）：

<asp:Button ID="btnSubmit" runat="server" OnClientClick="return ValidateUserNameBeforeSubmitting();" />

JavaScriptは次のようになります。

    $(document).ready(function () {
        $("#<%=TextUserName.ClientID%>").blur(function () {
            ValidateUserNameAfterBlur();
        });
    });

    function ValidateUserName() {
        $.ajax({ type: "POST",
            url: "../UserNameWebService.asmx/ValidateUserName",
            data: "{'strUsername': '" + $("#<%=TextUserName.ClientID%>").val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (data) {
                return data;
            }
        });
    }

    function ValidateUserNameBeforeSubmitting() {
        isValid = ValidateUserName();
        return isValid;
    }

    function ValidateUserNameAfterBlur() {
        isValid = ValidateUserName();
        //DISPLAY ERROR MESSAGE
    }

[更新しました]

実例-「123」の値は検証のためにtrueを返します。それ以外はすべてfalseを返します。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#TextUserName").blur(function () {
            ValidateUserNameAfterBlur();
        });
    });

    function ValidateUserName() {
        return $("#TextUserName").val() == "123";

//      $.ajax({ type: "POST",
//          url: "../UserNameWebService.asmx/ValidateUserName",
//          data: "{'strUsername': '" + $("#<%=TextUserName.ClientID%>").val() + "'}",
//          contentType: "application/json; charset=utf-8",
//          dataType: "json",
//          async: false,
//          success: function (data) {
//              return data;
//          }
//      });
    }

    function ValidateUserNameBeforeSubmitting() {
        isValid = ValidateUserName();
        $('#TextUserNameError').toggle(!isValid);
         return isValid;
    }

    function ValidateUserNameAfterBlur() {
        isValid = ValidateUserName();
        $('#TextUserNameError').toggle(!isValid);
    }



</script></head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextUserName" runat="server" />
        <div ID="TextUserNameError" style="display: none;" >Ooops!</div>
        <br />
        <asp:Button UseSubmitBehavior=true ID="btnSubmit" runat="server" OnClientClick="return ValidateUserNameBeforeSubmitting();" />
    </div>
    </form>
</body>
</html>
于 2012-04-30T20:11:32.740 に答える