Knockout 验证不适用于 Kendo 文本编辑器

Posted 2023-03-27

【中文标题】Knockout 验证不适用于 Kendo 文本编辑器

【英文标题】：Knockout validation not working with Kendo text editor

【发布时间】：2019-04-08 09:53:18

【问题描述】：

我正在尝试使用淘汰赛验证来验证我的模式。验证适用于文本输入，但使用剑道文本编辑器我无法在剑道文本编辑器上应用 css。在检查模式下，kendo 正在构建一个表格，并且在表格内部定义了具有所需属性的 textarea。当用户尝试插入空字段时，敲除验证给我错误并要求用户在提交数据之前插入值。但是，验证部分工作正常，但要突出显示所选字段，我需要更改输入字段的边框 CSS

 <div class="row">
       <div class="form-group col-xs-12" data-bind="validationElement: subject">
       <label class="required">Subject</label>
       <input type="text" class="form-control no-clear-icon" data-bind="textInput: subject" />
        </div>
</div>
 <div class="row">
       <div class="form-group col-xs-12" data-bind="validationElement: description">
             <label class="required">Description</label>
              <textarea style="resize: none;" wrap="hard" data-bind="TextEditor: description" rows="3"></textarea>
        </div>
 </div>

CSS-

.has-error .form-control 
border-color: red;
border-style: solid;
border-width: thin;

检查窗口 -

Inspect window view

电流输出

Current output

当用户尝试提交信息但teaxtarea 为空时所需的输出

Desired output

【参考方案1】：

只需在下面添加 CSS 即可解决问题

.has-error .k-content 
   border-color: red;
   border-style: solid;
   border-width: 1px;
  -webkit-box-shadow: none !important;
   box-shadow: none !important;

【参考方案2】：

我在telerik板上发现了一个关于这个主题here的类似问题：

.k-tooltip-validation 
    visibility: hidden

和

.k-widget > span.k-invalid,input.k-invalid

  border: 1px solid red !important;