CODEWITHSUNDEEP
kendo-uivalidation
gdub
gdub

Reputation: 41

Kendo UI - Validator message overwrite and empty errors array

I'm running into a problem with a Kendo validator. Three fields are set up for validation. Tabbing through them, the first name and last name fields show the expected message, but after tabbing through the from date field, the first name and last name messages get replaced with the from date message. Then, upon calling the validate() method, the errors array is empty even though validation fails. Also, if the save button is clicked without tabbing through the fields, the errors for the fields are not displayed at all.

Another strange thing is that if the spans for the messages are removed, all messages appear next to the first name field - they aren't displayed next to the corresponding input.

Any insight as to get this working properly would be appreciated.

the Script and HTML:

 $(document).ready(function() {
   $("#fn").kendoMaskedTextBox();
   $("#ln").kendoMaskedTextBox();
   $("#from").kendoDatePicker({
     format: "MM/dd/yyyy"
   });
   $("#thru").kendoDatePicker({
     format: "MM/dd/yyyy"
   });
   $("#btnSave").kendoButton({
     icon: "tick",
     click: function() {
       if (!vld.validate())
         alert(vld.errors.length);
     }
   });

   var vld = $("#myForm").kendoValidator().data('kendoValidator');

 })
<div id="myForm">
  <p>
    <label for="fn" class="myLabel">First Name:</label>
    <input id="fn" required validationMessage="{0} Required" />
    <span class="k-invalid-msg" data-for="fn"></span>
  </p>
  <p>
    <label for="ln" class="myLabel">Last Name:</label>
    <input id="ln" required validationMessage="{0} Required" />
    <span class="k-invalid-msg" data-for="ln"></span>
  </p>
  <p>
    <label for="from" class="myLabel">Period:</label>
    <input id="from" required validationMessage="From date is required" />
    <span> - </span>
    <input id="thru" />
    <span class="k-invalid-msg" data-for="from"></span>
  </p>
  <p>
    <label class="myLabel"></label>
    <button id="btnSave" class="btn">Save</button>
  </p>
</div>

jsFiddle link: http://jsfiddle.net/artrfkmw/1/

Upvotes: 1

Views: 3250

Answers (1)

gdub
gdub

Reputation: 41

Okay, it seems a/the trick to make this work is to set the values of the data-for attributes of the message spans to the name attribute of the input tag, not the id tag. So in the above example, adding name tags to the input elements is the quick fix:

<div id="myForm">
    <p>
        <label for="fn" class="myLabel">First Name:</label>
        <input id="fn" name="fn" required validationMessage="{0} Required" />
        <span class="k-invalid-msg" data-for="fn"></span>
    </p>
    <p>
        <label for="ln" class="myLabel">Last Name:</label>
        <input id="ln" name="ln" required validationMessage="{0} Required" />
        <span class="k-invalid-msg" data-for="ln"></span>
    </p>
    <p>
        <label for="from" name="from" class="myLabel">Period:</label>
        <input id="from" required validationMessage="From date is required" />
        <span> - </span>
        <input id="thru" />
        <span class="k-invalid-msg" data-for="from"></span>
    </p>
    <p>
        <label class="myLabel"></label>
        <button id="btnSave" class="btn" >Save</button>
    </p>
</div>

Upvotes: 1

Related Questions