kendoValidator highlights wrong fields in listView

[Alon]

I am seeing VERY strange behavior using a kendoValidtor with a listView. The listview is a table and each line looks like this:

 

<script type="text/x-kendo-tmpl" id="tmplMenuOptionsGroupRow">
  <tr>
      <td class="w-25">
          <i class="fal fa-arrows fa-2x dragHandler"></i>
      </td>
      <td class="w-50">
          <input name="optionDesc" class="form-control k-textbox k-input-lg" required validationMessage="Enter Description"
              data-bind="value: description, disabled:legacy, events:{change: editorModel.menuOptionGroup.onMenuItemOptionsGroupChange}" />

      </td>
      <td class="w-25 dragHide text-left">
          <input class="w-100 k-input-lg" data-role="numerictextbox"
              data-format="c"
              data-min="0"
              data-format="c2" name="optionPrice"
              data-spinners=false required validationMessage="Enter Price"
              data-bind="value:price, disabled:legacy, events:{change: editorModel.menuOptionGroup.onMenuItemOptionsGroupChange}" />
              <span class="k-invalid-msg" data-for="optionPrice"></span>

      </td>

      <td class="dragHide" >
          <button type="button" class="btn btn-danger btn-sm" data-bind="click:editorModel.menuOptionGroup.deleteOption, disabled:legacy"><i class="fal fal fa-trash-alt"></i>
          </button>
      </td>
  </tr>
</script>

 

 

As you can see the optionDesc field is a mandatory field and I have defined a validationMessage when it is empty.

However when I test it I see the following results (see 2020-03-29_1045.png)

As you can see the error message appears nexts ALL the optionDesc fields and not just the one that is missing.

So I thought I would try a different approach with the optionPrice field (also required). so I added a k-invalid-msg right next to the field in the same <tr> and <td >as the input. 

However it also behaves incorrectly and even MORE strangely. Basically the error message is displayed in the correct spot the first time. After that if any other field in another row is blank the error message is displayed in the original place and NOT next to the empty field. See image 2020-03-29_1049.png as an example. The field in row 3 is missing but the error message is showing in row 1 where it was previously missing.

Anyone have ideas/suggestions?

Alon

 

 

 

 

[Ivan Danchev]

Hello Alon,

The inputs in the posted code snippet are properly set with the required attribute and validationMessage set. I see no issue with that.

Please demonstrate your scenario in a dojo example that shows the problematic behavior. We will then investigate further whether the issue is in the Validator's configuration, or it is the ListView that causes the issue, if for example the inputs are validated correctly when they are not nested in the ListView.

Regards,
Ivan Danchev
Progress Telerik