我有一个用户控件定义为:
<div>
<asp:TextBox ID="txtBox" runat="server"></asp:TextBox>
<asp:CustomValidator ID="validator" runat="server" ControlToValidate="txtBox"></asp:CustomValidator>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#<%= txtBox.ClientID %>').blur(function (event) {
$('#<%= txtBox.ClientID %>').removeClass('errorTextBoxServer');
testBox($('#<%= txtBox.ClientID %>'), <%= RegularExpression %>);
});
testBox($('#<%= txtBox.ClientID %>'), <%= RegularExpression %>);
});
function <%= txtBox.ClientID %>_validateBox(source, args)
{
$('#<%= txtBox.ClientID %>').removeClass('errorTextBoxServer');
args.IsValid = testBox($('#<%= txtBox.ClientID %>'), <%= RegularExpression %>);
}
</script>
testBox定义为:
function testBox(thisBox, RegularExpression) {
if ($(thisBox).val() != "") {
var regex = new RegExp(RegularExpression);
var value = $(thisBox).val();
if (!regex.test(value)) {
//event.preventDefault();
$(thisBox).addClass('errorTextBox');
return false;
}
else {
$(thisBox).removeClass('errorTextBox');
return true;
}
}
else {
$(thisBox).removeClass('errorTextBox');
return true;
}
}
它被放置在网页中，如下所示:
<asp:TextBox ID="txtD1DOB" runat="server" readonly="true"></asp:TextBox>
<wpm:ValidatedTextBox id="txtUpdatedBalance" runat="server" RegularExpression="/^\d{1,3}(,?\d{3})*(\.\d{2,4})?$/" />
使用以下js:
$(document).ready(function () {
var $j = jQuery.noConflict();
$j("input[id*='txtD1DOB']").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "dd/mm/yy",
});
});
当我运行应用程序 js 时抛出错误:
Object doesn't support property or method 'datepicker'
如果我删除用户控件<wpm:ValidatedTextBox id="txtUpdatedBalance" runat="server" RegularExpression="/^\d{1,3}(,?\d{3})*(\.\d{2,4})?$/" />然后datepicker按预期工作。
我检查了是否有其他版本的 jquery-ui 加载，但找不到任何内容，并且似乎找不到导致问题的原因。有什么想法吗？
编辑:我尝试将用户控件更改为简单:
<asp:TextBox ID="txtUpdatedBalance" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="txtUpdatedBalance_RegularExpressionValidator" runat="server" ErrorMessage="Invalid value" ControlToValidate="txtUpdatedBalance" ValidationExpression="/^\d{1,3}(,?\d{3})*(\.\d{2,4})?$/"></asp:RegularExpressionValidator>
但同样的事情也发生了。删除RegularExpressionValidator让一切正常工作。
编辑2:为了回应Frebin Francis的评论，整个头部部分是:
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="Scripts/wpm_portal.js"></script>
<meta name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
它还有一个ScriptManager定义为:
<asp:ScriptManager runat="server">
<Scripts>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
</Scripts>
</asp:ScriptManager>
最佳答案
ASP.NET 4.5 推出 unobtrusive JavaScript for client-side validation 。启用此功能后(默认情况下)，像 CustomValidator 这样的验证控件会自动包含项目脚本目录中的 jQuery 副本。此副本与您在 <head> 中引用的 jQuery 版本冲突.
解决该问题的最简单方法是关闭不显眼的验证，您可以通过将以下设置添加到 Web.config 来实现:
<appSettings>
<add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
</appSettings>
如果您想使用不显眼的验证，请按照以下步骤操作:
- 使用 NuGet 包管理器，将 AspNet.ScriptManager.jQuery 升级到版本 2.1.3 并安装 AspNet.ScriptManager.jQuery.UI.Combined 版本 1.11.3。
- 删除
<script>包含来自 Google CDN 的 jquery.min.js 和 jquery-ui.min.js 的标记。 - 添加
<asp:ScriptReference>"jquery"的标签和"jquery.ui.combined"到<asp:ScriptManager>控制。
关于jquery - 添加其中包含 javascript 的用户控件会破坏 jquery-ui，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28770146/