Asp.net 在多个用户控件中使用jquery.validate.js验证WebForms

所以我有一个默认的搜索页面，它调用2个用户控件

<uc1:BasicSearch ID="BasicSearch" runat="server" />
<uc1:AdvancedSearch ID="AdvancedSearch" runat="server" />

我的两个用户控件都有多个我希望验证的日期字段，但我有一些问题

由于我使用.net，控件被重命名，我绕过了这个问题，但是使用，但是，这只在页面中起作用，一旦我尝试将所有脚本移动到.JS页面，它就会停止工作

由于某些原因，在加载AdvancedSearch控件和AdvancedSearch控件时，验证不会触发。如果我注释掉BasicSearch用户控件，则AdvancedSearch验证将按其应有的方式启动

这显然让我相信存在命名冲突，或者我只能在页面上使用sinlge验证脚本

我正在使用的代码

BasicSearch.ascx

<asp:TextBox ID="specificDateTextbox" runat="server" CssClass="form-control" placeholder="YYYY-MM-DD"></asp:TextBox> 

剧本

<script>

    $(function () {

        $("#form1").validate({
            rules: {
                <%=specificDateTextbox.UniqueID%>: {
                    dateISO:true,                        
                },
                <%=RangeStartDateTextbox.UniqueID%>: {
                    dateISO:true,                        
                },
                <%=RangeEndDateTextbox.UniqueID%>: {
                    dateISO:true                        
                }
            },
            messages: 
                {  
                    <%=specificDateTextbox.UniqueID%>: "* Please use a proper Date Format (YYYY-MM-DD)",
                    <%=RangeStartDateTextbox.UniqueID%>: "* Please use a proper Date Format (YYYY-MM-DD)",
                    <%=RangeEndDateTextbox.UniqueID%>: "* Please use a proper Date Format (YYYY-MM-DD)"    
                },
            highlight: function (element) {
                $(element).closest('.form-horizontal').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.form-horizontal').removeClass('has-error');
            },
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function (error, element) {
                if (element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            }
        });

    }); 


</script>

<script>

    $(function () {

            $("#form1").validate({
                rules: {
                    <%=AdvSpecificDateTextbox.UniqueID%>: {
                        dateISO:true                        
                    }
                },
                messages: 
                    {  
                        <%=AdvSpecificDateTextbox.UniqueID%>: "* Please use a proper Date Format (YYYY-MM-DD)"
                    },
                highlight: function (element) {
                    $(element).closest('.form-horizontal').addClass('has-error');
                },
                unhighlight: function (element) {
                    $(element).closest('.form-horizontal').removeClass('has-error');
                },
                errorElement: 'span',
                errorClass: 'help-block',
                errorPlacement: function (error, element) {
                    if (element.parent('.input-group').length) {
                        error.insertAfter(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });

        }); 


    </script>

$（函数（）{
$（“#表格1”）。验证({
规则：{
: {
是的，
},
: {
是的，
},
: {
dateISO：对
}
},
信息：
{  
：“*请使用正确的日期格式（YYYY-MM-DD）”，
：“*请使用正确的日期格式（YYYY-MM-DD）”，
：“*请使用正确的日期格式（YYYY-MM-DD）”
},
亮点：功能（元素）{
$（元素）。最近（'.form horizontal'）。addClass（'has-error'）；
},
取消高亮显示：功能（元素）{
$（元素）。最近（'.form horizontal'）。removeClass（'has-error'）；
},
errorElement:'span'，
errorClass:“帮助阻止”，
errorPlacement:函数（错误，元素）{
if（element.parent（'.input group'）.length）{
错误.insertAfter（element.parent（））；
}否则{
错误。插入符（元素）；
}
}
});
}); 

AdvancedSearch.ascx

<asp:TextBox ID="specificDateTextbox" runat="server" CssClass="form-control" placeholder="YYYY-MM-DD"></asp:TextBox> 

剧本

<script>

    $(function () {

        $("#form1").validate({
            rules: {
                <%=specificDateTextbox.UniqueID%>: {
                    dateISO:true,                        
                },
                <%=RangeStartDateTextbox.UniqueID%>: {
                    dateISO:true,                        
                },
                <%=RangeEndDateTextbox.UniqueID%>: {
                    dateISO:true                        
                }
            },
            messages: 
                {  
                    <%=specificDateTextbox.UniqueID%>: "* Please use a proper Date Format (YYYY-MM-DD)",
                    <%=RangeStartDateTextbox.UniqueID%>: "* Please use a proper Date Format (YYYY-MM-DD)",
                    <%=RangeEndDateTextbox.UniqueID%>: "* Please use a proper Date Format (YYYY-MM-DD)"    
                },
            highlight: function (element) {
                $(element).closest('.form-horizontal').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.form-horizontal').removeClass('has-error');
            },
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function (error, element) {
                if (element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            }
        });

    }); 


</script>

<script>

    $(function () {

            $("#form1").validate({
                rules: {
                    <%=AdvSpecificDateTextbox.UniqueID%>: {
                        dateISO:true                        
                    }
                },
                messages: 
                    {  
                        <%=AdvSpecificDateTextbox.UniqueID%>: "* Please use a proper Date Format (YYYY-MM-DD)"
                    },
                highlight: function (element) {
                    $(element).closest('.form-horizontal').addClass('has-error');
                },
                unhighlight: function (element) {
                    $(element).closest('.form-horizontal').removeClass('has-error');
                },
                errorElement: 'span',
                errorClass: 'help-block',
                errorPlacement: function (error, element) {
                    if (element.parent('.input-group').length) {
                        error.insertAfter(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });

        }); 


    </script>

$（函数（）{
$（“#表格1”）。验证({
规则：{
: {
dateISO：对
}
},
信息：
{  
：“*请使用正确的日期格式（YYYY-MM-DD）”
},
亮点：功能（元素）{
$（元素）。最近（'.form horizontal'）。addClass（'has-error'）；
},
取消高亮显示：功能（元素）{
$（元素）。最近（'.form horizontal'）。removeClass（'has-error'）；
},
errorElement:'span'，
errorClass:“帮助阻止”，
errorPlacement:函数（错误，元素）{
if（element.parent（'.input group'）.length）{
错误.insertAfter（element.parent（））；
}否则{
错误。插入符（元素）；
}
}
});
}); 

编辑 两个渲染控件如下所示

<input name="ctl00$MainContent$BasicSearch$specificDateTextbox" type="text" id="MainContent_BasicSearch_specificDateTextbox" class="form-control " placeholder="YYYY-MM-DD" />   

<input name="ctl00$MainContent$AdvancedSearch$AdvSpecificDateTextbox" type="text" id="MainContent_AdvancedSearch_AdvSpecificDateTextbox" class="form-control " placeholder="YYYY-MM-DD" />  

---

任何帮助都将不胜感激。

作为记录，我能够通过使用完全呈现的控件名并将调用用户控件的页面的.js中的规则链接在一起，使验证器与usercontrols一起工作

见下文

search.aspx

<%@ Register TagPrefix="uc1" TagName="BasicSearch" Src="~/_usercontrols/BasicSearch.ascx" %>
<%@ Register TagPrefix="uc1" TagName="AdvancedSearch" Src="~/_usercontrols/AdvancedSearch.ascx" %>
<uc1:BasicSearch ID="BasicSearch" runat="server" />
<uc1:AdvancedSearch ID="AdvancedSearch" runat="server" />  
<script src="<%= ResolveUrl("~/scripts/search/_actions.js")%>"></script>

---

}))

我只是想我会在这里加入.02。客户端Id在脚本文件中不起作用（但您已经知道），因为ASP.NET在为页面请求提供服务时会呈现页面上的控件（和Id）。我找到了两种方法来解决这个问题，并且能够将代码添加到我的脚本文件中

如果您使用的是.NET 4.0或更高版本，则可以在元素上使用

clientdmode=“Static”

，这将导致呈现控件维护您在标记中为其分配的ID。您可以在web.config中的页面级和应用程序级对每个控件使用此选项。这使得使用jQuery在脚本文件中查找它变得更加容易。这是最好的方法

---

如果您使用的是旧版本的.NET，而ClientIDMode不可用，则可以使用带有jQuery的“ends with”选择器，例如

$（'input[id$=“myServerId”]”）

，以从ASP.NET中查找id属性位于呈现id末尾的项目

我意识到这已经很老了，大多数人甚至不再使用usercontrols了，但我不得不在这里这样做，因为我把旧应用程序中的一些代码从页面移动到usercontrol，以便在其他地方重用它，我不得不处理这个问题。因此，为了防止其他人不得不处理这个问题，我最后做了以下几点：

function convertUserControlValidationRules($container, rules, msgs) {
  var association = {},
    newRules = {},
    newMsgs = {};

  for (var key in rules) {
    var name = "";
    if (association.hasOwnProperty(key))
        name = association[key];
    else {
        name = $container.find("#" + key).attr("name");
        association[key] = name;
    }

    newRules[name] = rules[key];
    if (msgs.hasOwnProperty(key))
        newMsgs[name] = msgs[key];
  }

  return { rules: newRules, messages: newMsgs };
}

其中，

$container

是表单的jQuery对象，rules/msg是原始规则/消息。显然，您需要在usercontrol中使用

clientmode=“Static”

声明

此处使用的一个小示例是：

var ucRules = convertUserControlValidationRules($form, { txtDate: { required: true }}, { txtDate: { required: "Please enter the date!" }});
$form.validate({ rules: ucRules.rules, messages: ucRules.message });

而不是

$form.validate({ 
  rules: { txtDate: { required: true }},
  messages: { txtDate: { required: "Please enter the date!" }}
});

---

非常小的代码更改，节省了大量时间！希望能帮助别人

要解决问题，我们需要在浏览器源代码中呈现相关标记时查看相关标记。一旦发现问题，您可以修复服务器端代码以呈现正确的标记。部分问题可能是对该插件的工作原理缺乏了解。在

.validate（）

中，规则是通过

名称来标识的，而不是它们的
id
。同样，您只能通过查看呈现的代码来验证实际发生了什么。我已经更新了我的问题。我看得出来