[英]After show Modal Window jQuery validation plugin doesn't work
我對jQuery Validation Plugin有問題。 我在實體框架中使用了ASP.NET MVC。 該項目有很多庫,很難理解問題並找到答案。 我有一個表格,其中包含字段。 我使用驗證插件來驗證客戶端字段。 該部分是可折疊的,可以打開和關閉。 在內部,我有一個用於打開模式窗口的按鈕。 在窗口內我可以搜索使用過的Ajax數據。 用戶可以手動添加信息,可以使用Ajax添加信息,並且字段可以為空。 第一項任務是為隱藏字段添加驗證。 我在$ {document).ready中為驗證器添加了setDefault .ready:
jQuery.validator.defaults.ignore = "";
當我為驗證程序添加設置ignore時,所有內容都可以在隱藏字段和打開字段中正常工作,但是在顯示模式窗口驗證程序插件后不起作用。 在FireBug中,我報錯:TypeError:驗證器未定義(兩次)。 我打開和關閉模式窗口(不使用Ajax搜索),但出現此錯誤,驗證器不起作用。
這是模態窗口代碼:
@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:
@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);});
這是需要驗證的域代碼:
Html.Bootstrap().Div(
Html.Bootstrap().Label("").LabelText("4.").Class("pull-left"),
Html.Bootstrap().FormGroup().TextBoxFor(model => model.EAN).Label()).Class("col-lg-6")
在chhtml視圖中,我在底部文件中添加了模式窗口:
<div class="modal fade" id="specificNutritionalPurposeSearch" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
它是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”行,插件即可正常工作。
可能是什么問題呢? 也許這是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從數據庫(EF)中獲取數據
我認為,當specyficNutSearch腳本更改DOM時,驗證處理程序將被刪除。
我的解決方案是更改清除方法,以便刷新驗證處理程序:
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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.