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

Question

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

我在设置类时遇到了一些问题，例如此类= <！>“;必需的电子邮件<！>”;我认为这与在主表单标签中使用表单标签有关。

在使用在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" />

并破坏了这个名字。我可以使用<%=tbUsername.ClientID %>获取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

以下是使用jQuery的示例使用WebForms的验证插件和用它来模仿验证组的概念。一旦你解决了几个问题，它实际上运作得很好。

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>

Answer 4

您可以在此处查看xVal.webForms： http://xvalwebforms.codeplex.com/

Answer 5

测试了Darin Dimitrov所说的并且它完美无缺，但是如果你不想为每个字段设置一个特定的类，你可以使用jQuery选择器：

$('form').validate();
$('input[id$=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" />

Answer 6

最佳解决方案是使用<！>“; <！> lt;％= tbUsername.UniqueID％<！> gt; <！> quot;而不是jQuery规则中的tbUsername。

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

Answer 7

我最近发布了一个xVal.WebForms的补丁文件，它解决了众所周知的ASP.Net验证组中的多个表单问题。此补丁还支持ASP.Net CausesValidation属性。

哟可以在这里阅读： http://cmendible.blogspot.com/

Answer 8

这样做的好方法是使用：

<！> lt;％= textbox.Name％<！> gt; 或 <！> lt;％= textbox.ClientId％<！> gt; 无论什么时候需要引用服务器项目。

即

var phoneNumb = $('#<%= tPhone.ClientID %>').val(); 

或

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

.......

Answer 9

对于 SharePoint 2010 ，我发现加载不同的usercontrols作为视图（通过ajax），如果您将javascript移动到库中并且不能使用服务器标签作为控件ID，则可以使用此方法：

例如#<%= tPhone.ClientID %>

$('input[id$=tPhone]').rules('add', 
{      
 required: true,      
 messages: 
 {          
  required: 'Some custom message for the username required field'      
 }  
});

此外，如果您通过Ajax动态加载用户控件，则无法使用$（document）.ready 你必须将jQuery封装在一个函数库中，如果它在（服务器端事件）页面的用户控件上加载它很好，但是在它通过Ajax加载的场景中，它将不会跳过。

我还没有尝试通过jQuery加载usercontrols，这看起来很重，看起来加载整个页面虽然可能稍微快一点。

比较加载技术的测试表明，更新面板速度与其他技术一样快，导致页面大小相同或更小，基本上可以快速或更快地加载更快或更多的数据。

Answer 10

我建议使用jQuery.simple.validator，它简单，轻量级和可自定义的验证器与asp.net Web表单兼容，因为它基本上可以在任何容器中执行验证，而不仅仅是

https://github.com/v2msoft/jquery.simple.validator

我建议你查看插件和文档。 用法：

<script type="text/javascript" src="/Content/js/jquery-plugins/jquery.simple.validator.js"></script>

<div id="container">
    <!-- REQUIRED FIELD -->
    <label>Required Field: </label><br/>
    <input type="text" id="required_field_control" data-required data-required-msg="Field is required" /><br /><br/>

    <input type="button" value="Validate" onclick='javascript:validate();' />
</div>


<script type="text/javascript">
    function validate() {
        $("#container").initialize();
        var ok = $("#container").validate();
        if (!ok)  alert("There are errors");
        else alert("Form is ok");
    }
</script

Answer 11

在本文中的信息我在寻找与jQuery的匹配时使用Control.ClientID ......非常有用的信息...

<label for="<%= tbName.ClientID %>">Name</label>
<input id="cphBody_tbName" runat="server" .../>