This is a migrated thread and some comments may be shown as answers.

kendoValidator highlights wrong fields in listView

1 Answer 24 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Alon
Top achievements
Rank 1
Veteran
Alon asked on 29 Mar 2020, 03:51 PM

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

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 31 Mar 2020, 06:18 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
ListView
Asked by
Alon
Top achievements
Rank 1
Veteran
Answers by
Ivan Danchev
Telerik team
Share this question
or