Question

所以我有一个默认搜索页面，调用2个UserControls

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

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

由于我使用.net，控件被重命名，我使用＆lt;％= specificDateTextbox.UniqueID％＆gt;但是，这只能在页面上工作，一旦我尝试移动所有脚本到.JS页面停止工作。
由于某些原因，加载两者时，验证永远不会在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>

AdvancedSearch.ascx

剧本

<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>

修改两个渲染的控件如下所示

<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" />

非常感谢任何帮助。

Answer 1

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

见下文

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>

_actions.js

$（function（）{

$("#form1").validate({
    rules: {
        ctl00$MainContent$BasicSearch$specificDateTextbox: {
            dateISO: true
        },
        ctl00$MainContent$BasicSearch$RangeStartDateTextbox: {
            dateISO: true
        },
        ctl00$MainContent$BasicSearch$RangeEndDateTextbox: {
            dateISO: true
        },
        ctl00$MainContent$AdvancedSearch$AdvSpecificDateTextbox: {
            dateISO: true
        },
        ctl00$MainContent$AdvancedSearch$AdvRangeStartDateTextbox: {
            dateISO: true
        },
        ctl00$MainContent$AdvancedSearch$AdvRangeStartEndTextbox: {
            dateISO: true
        }
    },
    messages:
        {
            ctl00$MainContent$BasicSearch$specificDateTextbox: "* Please use a proper Date Format (YYYY-MM-DD)",
            ctl00$MainContent$BasicSearch$RangeStartDateTextbox: "* Please use a proper Date Format (YYYY-MM-DD)",
            ctl00$MainContent$BasicSearch$RangeEndDateTextbox: "* Please use a proper Date Format (YYYY-MM-DD)",
            ctl00$MainContent$AdvancedSearch$AdvSpecificDateTextbox: "* Please use a proper Date Format (YYYY-MM-DD)",
            ctl00$MainContent$AdvancedSearch$AdvRangeStartDateTextbox: "* Please use a proper Date Format (YYYY-MM-DD)",
            ctl00$MainContent$AdvancedSearch$AdvRangeStartEndTextbox: "* 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);
        }
    }
});

}）;

Answer 2

我只是想在这里投入我的.02。客户端ID在脚本文件中不起作用（但您已经知道），因为ASP.NET在处理页面请求时呈现页面上的控件（和ID）。我找到了两种方法，并且能够将代码添加到我的脚本文件中。

如果您使用的是.NET 4.0或更高版本，则可以在元素上使用ClientIDMode="Static"，这将导致呈现的控件保留您在标记中分配的ID。您可以在每个控件，页面级别和web.config中的应用程序级别使用此功能。这使得在脚本文件中使用jQuery更容易找到它。这将是首选方法。

如果您使用的是旧版本的.NET，其中ClientIDMode不可用，您可以使用带有jQuery的“ends with”选择器，如$('input[id$="myServerId"]')来查找您的项目，其ID属性位于来自ASP.NET的呈现ID。

Answer 3

我意识到这已经很老了，而且大多数人甚至都不再使用用户控件了，但是在将旧应用程序中的某些代码从页面移动到用户控件后，我必须在此处执行此操作在其他地方重复使用它，我必须处理这个问题。所以，万一其他人不得不处理这个问题，这就是我最终要做的事情：

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 / msgs是原始规则/消息。显然，您需要在usercontrol中使用ClientIDMode="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!" }}
});

改变的代码非常少，节省了很多时间！希望能帮助别人！

在多个Usercontrol中使用时，使用jquery.validate.js验证WebForms

3 个答案: