JQuery驗證隱藏劍術-UI控件

我有一種使用kendo-ui numericTextBoxJQuery驗證隱藏劍術-UI控件

@Html.LabelFor(p => p.Cost) 
@Html.TextBoxFor(p => p.Cost, new { @autocomplete = "off" })

我結合它的形狀，然後，使之與JQuery驗證插件工作，我進行以下設置：

$("#Cost").kendoNumericTextBox({ 
    format: "c", 
    min: 0, 
    decimals: 2 
}); 

$.validator.setDefaults({ 
    ignore: [], 
    highlight: function (element, errorClass) { 
     element = $(element); 
     if (element.hasClass("k-input")) { 
      element.closest(".k-widget").addClass(errorClass); 

     } else { 
      element.addClass(errorClass); 
     } 
    }, 
    unhighlight: function (element, errorClass) { 
     element = $(element); 
     if (element.hasClass("k-input")) { 
      element.closest(".k-widget").removeClass(errorClass); 
     } else { 
      element.removeClass(errorClass); 
     } 
    } 
});

當我嘗試提交表單並且Cost輸入無效時，它會正確添加errorClass（在.k-widget包裝上）。

問題是，如果我再次按下提交按鈕，那麼kendo-ui元素簡單消失（與style="display: none;"）。

我不知道是什麼觸發了這個。我已經看到，如果我將errorClass更改爲input-validation-error以外的其他內容，那麼kendo-ui小部件仍然可見。

這個問題只發生在kendo-ui控件上，而不是標準html輸入。

我做錯了什麼？

來源

2013-05-19 Catalin

您尚未顯示足夠的代碼來重現任何內容。表單的呈現HTML在哪裏？ '.validate（）'聲明在哪裏？ – Sparky

@RaraituL你有沒有想過這個解決方案？我有同樣的問題。 – aw04

我敢打賭，數字texbox控件是double-div-wrapped就像datepicker控件一樣。下面是highlight()和unhighlight()功能我在validator配置中使用，以確定哪些元素錯誤類適用於：

... 
highlight: function (element, errorClass, validClass) { 
    var e = $(element), 
     parent = _getParent(e); 

    _addClass(e, parent); 
    }, 
unhighlight: function (element, errorClass, validClass) { 
    var e = $(element), 
     parent = _getParent(e); 

    _removeClass(e, parent); 
} 
... 

function _getParent(element) { 
    // a Kendo DatePicker is double-wrapped, so that requires us to return the parent of the parent 
    return (element.parent().hasClass('k-picker-wrap')) ? element.parent().parent() : element.parent(); 
} 

function _addClass (element, parent) { 
    if (parent.hasClass('k-widget')) { 
    parent.addClass('error'); 
    } else { 
    element.addClass('error'); 
    } 
} 

function _removeClass(element, parent) { 
    if (parent.hasClass('k-widget')) { 
    parent.removeClass('error'); 
    } else { 
    element.removeClass('error'); 
    } 
}

來源

2013-08-22 20:25:47 Brett

我已經做了一個非常類似於這個的解決方案，除了不是搜索'.k-picker-wrap'css類，我正在尋找'.k-widget'類，所有'kendo ui'控件有它 – Catalin

@RaraituL嗯，這也是我所做的以及找到的元素，但無論我選擇它仍然設置「顯示：無」在第二次提交。 – aw04

@ aw04：啊，沒錯。如果我沒有記錯，它是隱藏控件的'jquery.validate.unobtrusive'插件中的一段代碼。我認爲這個函數負責隱藏控件的函數onError（error，inputElement）'。不幸的是，我再也沒有這個代碼來確切地知道 – Catalin

要解決該問題，即元素在第二消失提交，我這樣做：

$("form").submit(function (event) { 
    $(".k-widget").removeClass("input-validation-error"); 
}

來源

2015-07-27 21:43:46 lentoPastel

JQuery驗證隱藏劍術-UI控件

回答

相關問題