Search code examples
knockout.jskendo-uitelerikkendo-gridknockout-validation

Knockout validation not working with Kendo text editor


I am trying to validate my modal using knockout validation. Validation works fine with text inputs but using kendo text editor I am not able to apply css on kendo text editor. In inspect mode, kendo is building a table and inside table it has defined textarea with required properties. When user try to insert empty fields, knockout validation gives me error and ask user to insert value before submitting the data. However, validation part works fine but to highlight the selected field, I need to change the border CSS of input field

 <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 -

Inspect window view

Current output

Current output

Desired output when user try to submit information but teaxtarea is empty

Desired output


Solution

  • Simply by adding CSS below resolved the problem

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