ASP.NET Web窗体中的jQuery验证插件

我真的很想在我的ASP.NET Web窗体应用程序(不是MVC)中使用jQuery Validation插件。 我发现比在各处添加asp验证器并设置控件以对所有验证器进行验证更容易。

在设置此类class =“ required email”之类的类时,我都遇到了一些问题,我认为这与在主form标签中包含form标签有关。

当调用使用在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验证程序插件取得任何成功?如果是这样,那么使用多个表单又如何呢?

11个解决方案
46 votes

您可以签出rules add函数,但是基本上可以执行以下操作:

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引擎生成的糟糕的标识符。

Darin Dimitrov answered 2020-08-04T18:33:31Z
11 votes

以下是将jQuery Validation插件与WebForms一起使用并使用其模拟验证组概念的示例。 一旦解决了几个问题,它实际上就可以很好地工作。

Dave Ward answered 2020-08-04T18:33:51Z
11 votes
$("#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>
1984kg answered 2020-08-04T18:34:07Z
4 votes

您可以在此处检查xVal.webForms:[http://xvalwebforms.codeplex.com/]

Carlos Mendible answered 2020-08-04T18:34:27Z
2 votes

测试了达林·迪米特洛夫(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" />
C.Hoffmann answered 2020-08-04T18:34:47Z
2 votes

最好的解决方案是使用“ <%= tbUsername.UniqueID%>”代替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"
    }, 
}.
Jackie answered 2020-08-04T18:35:07Z
0 votes

我最近发布了xVal.WebForms的补丁文件,该文件解决了在众所周知的ASP.Net验证组上中继的多个表单问题。 此修补程序还支持ASP.Net CausesValidation属性。

您可以在这里阅读有关内容:[http://cmendible.blogspot.com/]

Carlos Mendible answered 2020-08-04T18:35:31Z
0 votes

一个很好的方法是使用:

<%= textbox.Name%>或<%= textbox.ClientId%>,当您需要引用服务器项时。

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"
                }, 
        }.

.......

Adam answered 2020-08-04T18:36:08Z
0 votes

对于SharePoint 2010,我发现通过将不同的用户控件加载为视图(通过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在(服务器端事件)页面的User Control上正常加载,则必须将jQuery封装在函数库中,但在通过Ajax与Update Panel加载的情况下,它不会跳舞。

我还没有尝试通过jQuery加载用户控件,这看起来很沉重,并且似乎可以加载整个页面,尽管可能更快或更短。

对比加载技术的测试表明,“更新面板”与其他技术一样快,并且页面大小相同或更小,并且加载速度基本上快得多。

jason robertson answered 2020-08-04T18:36:47Z
0 votes

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

[HTTPS://GitHub.com/V2M soft/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
Christian answered 2020-08-04T18:37:15Z
0 votes

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

<label for="<%= tbName.ClientID %>">Name</label>
<input id="cphBody_tbName" runat="server" .../>
Dscoduc answered 2020-08-04T18:37:35Z
translate from https://stackoverflow.com:/questions/619816/jquery-validation-plugin-in-asp-net-web-forms