Question

我正在尝试使用敲除验证来验证我的模态。验证可以在文本输入中正常运行，但是使用kendo文本编辑器时，我无法在kendo文本编辑器上应用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

Answer 1

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

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

Answer 2

我在Telerik板上发现了与此主题here类似的问题：

.k-tooltip-validation {
    visibility: hidden
}

和

.k-widget > span.k-invalid,input.k-invalid
{
  border: 1px solid red !important;
}

淘汰赛验证不适用于Kendo文本编辑器

2 个答案: