ASP.NET Web窗体中的jQuery Validation插件

Question

我真的想在我的ASP.NET Web窗体应用程序(而不是MVC)中使用jQuery Validation插件.我觉得比在任何地方添加asp验证器更容易,并将控件设置为验证所有这些的字段.

我在设置像class ="required email"这样的类时遇到了一些问题,我认为这与主表单标签中的表单标签有关.

当使用在asp控件中被破坏的名称调用jquery validate时,我也会遇到问题

// validate signup form on keyup and submit
$("#signupForm").validate({
    rules: { 
        username: {
            required: true,
            minlength: 2
        }, },
    messages: { 
        username: {
            required: "Please enter a username",
            minlength: "username at least 2 characters"
        }, 
    }.

.......

        <p>
            <label for="username">
                Username</label>
            <input id="username" name="username" />
        </p>

因为这

<asp:TextBox ID="tbUsername"  runat="server"></asp:TextBox>

呈现为

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" />

并破坏了这个名字.我可以使用ClientID <%=tbUsername.ClientID %>,但不能使用ClientName

有人在asp.net上使用jquery验证器插件有什么成功吗？如果是这样,使用多个表单很像使用单独的验证组？

Answer 1

您可以查看规则添加功能,但基本上您可以执行以下操作:

jQuery(function() {
    // You can specify some validation options here but not rules and messages
    jQuery('form').validate(); 
    // Add a custom class to your name mangled input and add rules like this
    jQuery('.username').rules('add', { 
        required: true, 
        messages: { 
            required: 'Some custom message for the username required field' 
        } 
    });
});

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" class="username" />

这种方式无需担心webforms引擎生成的糟糕标识符.

Answer 2

以下是使用带有WebForms的jQuery Validation插件并使用它来模拟验证组概念的示例.一旦你解决了几个问题,它实际上工作得很好.

Answer 3

$("#signupForm").validate({
        rules: { 
                <%= tbUsername.UniqueID %>: {
                        required: true,
                        minlength: 2
                }, },
        messages: { 
                <%= tbUsername.UniqueID %>: {
                        required: "Please enter a username",
                        minlength: "username at least 2 characters"
                }, 
        });

<asp:TextBox ID="tbUsername" runat="server"></asp:TextBox>