1

検証コントロールの代わりに jquery.validate を使用して必須/電子メール フィールドを操作するユーザー コントロールを作成しています。簡単なテスト ページを作成したところ、すべて正常に動作しました。ただし、一部の機能を Web コントロールに抽出してページにドロップすると、コード ビハインドの if(Page.IsValid) { } チェックが常に true のように見え、検証が機能しなくなります。Web コントロールに使用しているコードは次のとおりです。

フロントエンド：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestControl.ascx.cs" I          nherits="JqueryValidateTest.TestControl" %>
<div id="control-wrapper">
    <asp:TextBox ID="txtName" runat="server" ClientIDMode="Static"></asp:TextBox>
    <asp:TextBox ID="txtEmail" runat="server" ClientIDMode="Static"></asp:TextBox>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" 
        onclick="btnSubmit_Click" />
</div>

分離コード:

protected void Page_Load(object sender, EventArgs e)
{

}

protected void btnSubmit_Click(object sender, EventArgs e)
{
    if (Page.IsValid)
        Response.Write("Page is valid");
    else
        Response.Write("Page is not valid");
}

これは、コントロールがドロップされるページの html/js です。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryValidateTest.Default" %>

<%@ Register Src="TestControl.ascx" TagName="TestControl" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        input.valid
        {
            border: 2px solid lime;
        }
        input.error
        {
            border: 2px solid red;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">     </script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        jQuery.validator.messages.required = "";
        jQuery.validator.messages.email = "";
        $('#form1').validate({
            rules:
            {
                txtName: {
                    required: true
                },
                txtEmail: {
                    required: true,
                    email: true
                }
            },
            messages: {}
        });
    });
    </script>
</head>
<body>
<form id="form1" runat="server">
<div>
    <uc1:TestControl ID="TestControl1" runat="server" />   
</div>
</form>
</body>
</html>

コントロールのIDが変更されたことに関係があるのではないかと思いましたが、ClientIDModeを静的に変更しましたが、それらは同じままのようです。

これが失敗する理由を誰かが知っていますか?

ありがとう

4

2 に答える 2

3

これを使って ：

<%= txtName.UniqueID %> {
                required: true
            },
 <%= txtEmail.UniqueID %> : {
                required: true,
                email: true
            }
于 2012-07-11T18:45:41.680 に答える
2

コントロール ID は、NamingController の階層に従って動的に名前が付けられます。

最初の解決策:ClientIDMode=staticフィールドまたは Page または UserControl に使用できます (ただし、2 つのコントロールに同じ名前を付けないように注意する必要があります)。

ClientID2 番目の解決策: ユーザー コントロール内に JavaScript 検証ルールを追加し、この未テスト コードのようなコントロールを参照します。

$(function () {
    $('#form1').rules("add",
        {
            <%= txtName.ClientID %>: {
                required: true
            },
            <%= txtEmail.ClientID %>: {
                required: true,
                email: true
            }
        }
    );
});
于 2012-07-11T21:49:13.293 に答える