我有jQuery Validation Plugin的问题。 我使用ASP.NET MVC和Entity Framework。 该项目有很多图书馆,很难理解问题并找到答案。 我有一个表格,其中有字段的部分。 我使用validation插件来validation客户端字段。 该部分是可折叠的,可以打开和关闭。 在内部我有打开模态窗口的按钮。 在窗口内我可以搜索使用Ajax的数据。 用户可以手动添加信息,可以添加使用Ajax的信息,字段可以为空。 第一项任务是为隐藏字段添加validation。 我在$(document).ready中添加了setDefault for validator:
jQuery.validator.defaults.ignore = "";
当我为validation器添加设置忽略时,一切都可以正常使用隐藏字段和打开字段但是在显示模态窗口后validation器插件不起作用。 在FireBug中我收到错误:TypeError:validation器未定义(两次)。 我打开并关闭模态窗口(没有Ajax搜索),我接受此错误,validation器不起作用。
这是模态窗口代码:
@using (modal.BeginBody()){ @using (var form = Html.Bootstrap().Begin(new Form().HtmlAttributes(new { onsubmit = "return false" }))) { @form.FormGroup().TextBoxFor(model => model.EANCode).Label(); @form.FormGroup().TextBoxFor(model => model.Name).Label(); @form.FormGroup().TextBoxFor(model => model.InternationalName).Label(); @Html.Bootstrap().Div(Html.Bootstrap().SubmitButton().Text("Wyszukaj").Id("search-specific").Style(ButtonStyle.Success). ButtonBlock().PrependIcon("glyphicon glyphicon-search")).Class("col-lg-5 col-lg-offset-7"); } }@using (modal.BeginFooter()){@Html.Bootstrap().Button().Text("Zamknij").Data(new { dismiss = "modal" }).Style(ButtonStyle.Primary)}
我在这个文件中添加了带有Ajax代码的Bundels:
@Scripts.Render("~/bundles/specificNutSearch")
这是Ajax代码:
$(document).ready(function () { function pagination() { $('#result-table').each(Utils.Pagination); } function getData(id) { $.ajax({ url: "GetSpecific", dataType: "json", method: "POST", cache: false, data: { id: id }, }).success(function (result) { if (result === null) return; for (var propName in result) { $(".panel [Name$='." + propName + "']").val(result[propName]); } clear(); }); } function clear() { $("#result-table").html(""); $(".modal input").val(""); $(".pager").remove(); } function search() { var form = $("#search-entry-form :input").serialize(); $.ajax({ url: $('#search-entry-form form').attr('action'), dataType: "html", method: "POST", cache: false, data: form }).success(function (result) { $("#result-table").html(result); $(".select-specific").on("click", function () { getData($(this).data("specific")) }); pagination(); }); } $("#search-specific").on("click", search);});
这是需要validation的字段代码:
Html.Bootstrap().Div( Html.Bootstrap().Label("").LabelText("4.").Class("pull-left"), Html.Bootstrap().FormGroup().TextBoxFor(model => model.EAN).Label()).Class("col-lg-6")
在chhtml视图中,我在底部文件中添加了模态窗口:
它是ViewModel字段:
[Display(Name = "Kod EAN")] [RegularExpression("[0-9]{13}",ErrorMessage = "Kod EAN powinien zawierać 13 znaków")] public string EAN { get; set; }
还发现了一个非常奇怪的事情:当我注释掉所有specificNutSearch(@ Scripts.Render(“〜/ bundles / specificNutSearch”))代码时,插件不起作用。但是当我注释掉@ Scripts.Render时(“〜/ bundles / specificNutSearch“ line,plugin有效。
可能是什么问题呢? 也许这是jQuery和Validator插件版本不兼容的问题?
编辑:
这是打开模型窗口的按钮代码:
@Html.Bootstrap().Button().Text("Wyszukaj środek spożywczy").TriggerModal("specificNutritionalPurposeSearch").HtmlAttributes(new { href = Url.Action("SearchSpecificNutritionalPurpose") }).Style(ButtonStyle.Success).ButtonBlock().PrependIcon("glyphicon glyphicon-search")
这是Controller中的ActionResult:
[HttpGet] public ActionResult SearchSpecificNutritionalPurpose() { var model = new SpecificNutritionalPurposeSearchViewModel(); return PartialView("Modals/_SpecificNutritionalPurposeDictionarySearch", model); }
在动作模型中为空,因为模态窗口具有用于搜索数据的按钮。
这是用于搜索数据的模态窗口中的搜索按钮的ActionResult:
[HttpPost] public virtual ActionResult SearchSpecificNutritionalPurpose(SpecificNutritionalPurposeSearchViewModel searchParameters) { var searchResult = _dictionaryRepository.FindSpecificNutritionalPurpose(searchParameters.EANCode, searchParameters.Name, searchParameters.InternationalName).Take(100).ToList(); return PartialView("Modals/_SpecificNutritionalPurposeSearchResult", searchResult); }
方法FindSpecificNutritionalPurpose从dataBase(EF)获取数据
我认为当specyficNutSearch脚本改变DOM时,validation处理程序将被删除。
我的解决方案是更改clear方法,以便刷新validation处理程序:
function clear() { $("#result-table").html(""); $(".modal input").val(""); $(".pager").remove(); //add this var $form = $("#search-entry-form form"); $form.removeData("validator").removeData("unobtrusiveValidation"); $.validator.unobtrusive.parse($form); }
以上就是jQuery教程分享显示模态窗口后jQueryvalidation插件不起作用相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/558399.html
赞 (0)