显示模态窗口jQuery验证插件后不起作用 [英] After show Modal Window jQuery validation plugin doesn't work
问题描述
jQuery验证插件出现问题. 我在实体框架中使用了ASP.NET MVC.该项目有很多库，很难理解问题并找到答案. 我有一个表格，其中包含字段.我使用验证插件来验证客户端字段. 该部分是可折叠的，可以打开和关闭.在内部，我有一个用于打开模态窗口的按钮.在窗口内，我可以搜索使用过的Ajax数据.用户可以手动添加信息，可以使用Ajax添加信息，并且字段可以为空. 第一项任务是为隐藏字段添加验证. 我在$(document).ready内为验证器添加了setDefault.
I have a problem with jQuery Validation Plugin. I used ASP.NET MVC with Entity Framework. The project has a lot of libraries and it's hard to understand the problem and find answer. I have a form on which the section with fields. I used validation plugin for validate client-side fields. The section is collapsible and can to be open and closed. Inside section I have button for open modal window. Inside window I can to search data used Ajax. User can to add information manually, can add information used Ajax and fields can be empty. The first task is to add validation for hidden fields. I added setDefault for validator inside $(document).ready:
jQuery.validator.defaults.ignore = "";
当我为验证器添加设置忽略时，所有内容都可以在隐藏字段和打开字段中正常工作，但是在显示模式窗口验证器插件后不起作用.在FireBug中，我报错:TypeError:验证器未定义(两次). 我打开并关闭模式窗口(不使用Ajax搜索)，但出现此错误，验证器不起作用.
When I added setting ignore for validator, everything work fine with hidden fields and open fields but after showing modal window validator plugin doesn't work. In FireBug I take error: TypeError: validator is undefined (twice). I open and close the modal window (without Ajax search) and I take this error and validator doesn't work.
这是模式窗口代码:
@using (modal.BeginBody()){
<div class="row">
<div class="col-lg-offset-3 col-lg-6" id="search-entry-form">
@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");
}
</div>
</div>
<div class="col-lg-12 top30" id="result-table"></div>}@using (modal.BeginFooter()){@Html.Bootstrap().Button().Text("Zamknij").Data(new { dismiss = "modal" }).Style(ButtonStyle.Primary)}
我在此文件中添加了带有Ajax代码的Bundels:
I this file I added Bundels with Ajax code:
@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);});
这是需要验证的域代码:
This is the field code which need validate:
Html.Bootstrap().Div(
Html.Bootstrap().Label("").LabelText("4.").Class("pull-left"),
Html.Bootstrap().FormGroup().TextBoxFor(model => model.EAN).Label()).Class("col-lg-6")
在 chhtml 视图中，我在底部文件中添加了模式窗口:
In the chhtml view I added modal window on the bottom file:
<div class="modal fade" id="specificNutritionalPurposeSearch" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
这是ViewModel字段:
It is ViewModel field:
[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" 行，插件有效.
Also found a very strange thing: When I Comment out the all specificNutSearch (@Scripts.Render("~/bundles/specificNutSearch")) code, the plugin does not work.But when I comment out @Scripts.Render("~/bundles/specificNutSearch" line, plugin works.
可能是什么问题?也许这是jQuery和Validator插件版本不兼容的问题?
What could be the problem? Maybe that's a problem of incompatibility of versions jQuery and Validator Plugin?
这是打开模型窗口的按钮代码:
This is button code for open model window:
@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:
This is ActionResult in Controller:
[HttpGet]
public ActionResult SearchSpecificNutritionalPurpose()
{
var model = new SpecificNutritionalPurposeSearchViewModel();
return PartialView("Modals/_SpecificNutritionalPurposeDictionarySearch", model);
}
在动作模型中为空，因为模式窗口具有用于搜索数据的按钮.
In action model empty because modal window has button for searching data.
这是模式窗口中用于搜索数据的搜索按钮的ActionResult:
This is ActionResult for search button in modal window for searching data:
[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 从数据库(EF)中获取数据
Method FindSpecificNutritionalPurpose take data from dataBase (EF)
推荐答案
我认为，当specyficNutSearch脚本更改DOM时，验证处理程序将被删除.
I think that when the specyficNutSearch script alters the DOM the validation handlers are getting removed.
我的解决方案是更改清除方法，以便刷新验证处理程序:
My solution is to change clear method so it will refresh validation handlers:
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验证插件后不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
