jquery validate ẩn điều khiển kendo-ui

Question

Tôi có một hình thức trong đó sử dụng một kendo-ui numericTextBox

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

tôi ràng buộc nó, sau đó, để làm cho nó làm việc với plugin jquery validate, tôi thiết lập các cài đặt sau:

$("#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); 
     } 
    } 
}); 

Khi tôi cố gắng gửi biểu mẫu và đầu vào Cost không hợp lệ, nó thêm đúng ErrorClass (trên .k-widget trình bao bọc).

Vấn đề là nếu tôi nhấn nút gửi lần nữa, thì phần tử kendo-ui sẽ biến mất (với style="display: none;").

Tôi không biết điều gì đang kích hoạt tính năng này. Tôi đã thấy rằng nếu tôi thay đổi errorClass thành một cái gì đó khác ngoài input-validation-error, thì tiện ích kendo-ui vẫn hiển thị.

Sự cố này chỉ xảy ra với các điều khiển kendo-ui, không phải với các đầu vào html chuẩn.

Tôi đang làm điều gì đó sai?

Answer 1

Tôi đặt cược rằng điều khiển hộp số bằng số được bao bọc hai mặt giống như điều khiển datepicker. Sau đây là các highlight() và unhighlight() chức năng tôi sử dụng trong cấu hình validator tôi để xác định những yếu tố để áp dụng các lớp lỗi:

... 
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'); 
    } 
} 

Answer 2

Để khắc phục những vấn đề mà các phần tử biến mất vào thứ hai gửi, tôi đã làm điều này:

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