Problem with editor template and validation don't disappear

[Dany]

I have a grid with a template Editor like this. My problem is when i write something in txtFirstname field and remove it, when i quit field, required message is display. When I return in this field and write something and exit the field, the validation message don't disappear. Do you know why ?

 

<script id="contactEditorTemplate" type="text/x-kendo-template">
    <div style="width: 630px">
         <p>
        <label for="txtFirstname">@(New HtmlString(LocalizationValues.Firstname))</label>
        <input id="txtFirstname2" name="txtFirstname" type="text" data-bind="value:Firstname" required validationMessage="@(New HtmlString(LocalizationValues.The_Firstname_Is_Mandatory))"/>     
      </p>
        <p>
        <label for="txtLastname">@(New HtmlString(LocalizationValues.Lastname))</label>
        <input id="txtLastname" name="txtLastname" type="text" data-bind="value:Lastname" required validationMessage="@(New HtmlString(LocalizationValues.The_Lastname_Is_Mandatory))"/>
      </p>
      <p>
        <label for="txtAddress">@(New HtmlString(LocalizationValues.Address))</label>
        <input id="txtAddress" name="txtAddress" type="text" data-bind="value:Address" required validationMessage="@(New HtmlString(LocalizationValues.The_Address_Is_Mandatory))"/>
      </p>
      <p>
        <label for="txtAddress2">@(New HtmlString(LocalizationValues.Address_Line2))</label>
        <input id="txtAddress2" name="txtAddress2" type="text" data-bind="value:Address2" />
      </p>
         <p>
    <div id="divQuebecCity">
          <label for="city">@(New HtmlString(LocalizationValues.City))</label>
          <input id="city" name="city" required data-bind="value: City" required validationMessage="@(New HtmlString(LocalizationValues.The_City_Is_Mandatory))" />
    </div>
      </p>
      <p>
        <div id="divNonQuebecCity">
          <label for="txtNonQuebecCity">@(New HtmlString(LocalizationValues.City))</label>
          <input id="txtNonQuebecCity" name="txtNonQuebecCity" type="text" data-bind="value: NonQuebecCity" required required validationMessage="@(New HtmlString(LocalizationValues.The_City_Is_Mandatory))"/>
    </div>
      </p>
          <p>
        <label for="txtPostalCode">@(New HtmlString(LocalizationValues.Postal_Code))</label>
        <input id="txtPostalCode" name="txtPostalCode" type="text" data-bind="value: PostalCode" class="postalCode" pattern="[A-Za-z][0-9][A-Za-z] [0-9][A-Za-z][0-9]" required validationMessage="@(New HtmlString(LocalizationValues.The_Postal_Code_Format_Is_Invalid))" />
      </p>
          <p>
        <div id="divProvince">
            <label for="province">@(New HtmlString(LocalizationValues.Province))</label>
            <input id="province" name="province" required data-bind="value: Province" required validationMessage="@(New HtmlString(LocalizationValues.The_Province_Is_Mandatory))" />
    </div>
      </p>
     <p>
        <label for="txtRole">@(New HtmlString(LocalizationValues.Role))</label>
        <input id="txtRole" name="txtRole" type="text" data-bind="value:Role" required validationMessage="@(New HtmlString(LocalizationValues.The_Role_Is_Mandatory))"/>
      </p>         
      <p>
        <div id="divIsEmergency">
            <label for="isEmergency">@(New HtmlString(LocalizationValues.IsEmergencyContact))</label>
            <div id="isEmergency" name="isEmergency" data-bind="value: IsEmergency"/>
            <div id="isEmergencyExplanation">
                 <label>@(New HtmlString(LocalizationValues.IsEmergencyInformation))</label>
            </div>
        </div>
      </p> 
    <p> 
        <label for="divPrincipalPhoneType">@(New HtmlString(LocalizationValues.PrincipalPhoneTitle))</label> 
    </p>  
    <p>
    <div id="divPrincipalPhone"> 
    <p>       
          <label for="lblPrincipalPhoneType">@(New HtmlString(LocalizationValues.Type))</label>
          <input id="divPrincipalPhoneType" name="divPrincipalPhoneType" required data-bind="value: PrincipalPhoneType" validationMessage="@(New HtmlString(LocalizationValues.The_Phone_Type_Is_Mandatory))" />
    </p>
    <p>
          <label for="lblPrincipalPhoneNumber">@(New HtmlString(LocalizationValues.PhoneNumber))</label> 
          <input id="txtPrincipalPhoneNumber" name="txtPrincipalPhoneNumber" type="tel" pattern="[(][0-9]{3}[)] [0-9]{3}-[0-9]{4}" required data-bind="value:PrincipalPhoneNumber" class="phoneNumberMask"  validationMessage="@(New HtmlString(LocalizationValues.The_Phone_Number_Is_Mandatory))" />
    </p>
    <p>
          <label for="lblPrincipalPhoneExtension">@(New HtmlString(LocalizationValues.PhoneExtension))</label> 
          <input id="txtPrincipalPhoneExtension" name="txtPrincipalPhoneExtension" type="text" data-bind="value:PrincipalPhoneExtension" />  
    </p>    
    </div>
    </p>
     <p> 
        <label for="divSecondaryPhoneType">@(New HtmlString(LocalizationValues.SecondaryPhoneTitle))</label> 
    </p>
    <p>
    <div id="divSecondaryPhone">   
    <p>      
          <label for="lblSecondaryPhoneType">@(New HtmlString(LocalizationValues.Type))</label>
          <input id="divSecondaryPhoneType" name="divSecondaryPhoneType" data-bind="value: SecondaryPhoneType" />
    </p>
    <p>
          <label for="lblSecondaryPhoneNumber">@(New HtmlString(LocalizationValues.PhoneNumber))</label> 
          <input id="txtSecondaryPhoneNumber" name="txtSecondaryPhoneNumber" type="tel" data-bind="value:SecondaryPhoneNumber" class="phoneNumberMask" />
    </p>
    <p>
          <label for="lblSecondaryPhoneExtension">@(New HtmlString(LocalizationValues.PhoneExtension))</label> 
          <input id="txtSecondaryPhoneExtension" name="txtSecondaryPhoneExtension" type="text" data-bind="value:SecondaryPhoneExtension" />      
    </p>
    </div>
    </p> 
     <p> 
        <label for="divEmailType">@(New HtmlString(LocalizationValues.EmailTitle))</label> 
    </p>
    <p>
    <div id="divEmail">  
    <p>       
          <label for="divEmailType">@(New HtmlString(LocalizationValues.Type))</label>
          <input id="divEmailType" name="divEmailType" required data-bind="value: EmailType" validationMessage="@(New HtmlString(LocalizationValues.The_Email_Type_Is_Mandatory))" />
    </p>
    <p>
          <label for="txtEmailAddress">@(New HtmlString(LocalizationValues.Email))</label> 
          <input id="txtEmailAddress" name="txtEmailAddress" type="email" required data-bind="value: EmailAddress" validationMessage="@(New HtmlString(LocalizationValues.The_Email_Is_Mandatory))" />             
    </p>
    </div>
    </p> 
    <div/>
</script>

[Dimiter Topalov]

Hello Dany,

The described situation is reproducible only when the second entered value is the same as the last valid value that the field has hold:

http://dojo.telerik.com/IwOqU

For example, if you open the top-left row for editing, delete the text, and leave the field, the validation will be triggered. Then if you go back in and type the initial value "Jane Doe", the validation message will not disappear (but if any other valid value is typed, the message will go away).

This is caused by the fact that the change detection is triggered when the underlying model value is changed. When an attempt to leave the input empty is made, the initial model value will not be changed, the validation message will be displayed, and when a value, equal to the one the model already has, is entered in the input, the model is actually not changed, and this is why the validation mechanism is not triggered.

You can avoid this by handling the edit event, where you can obtain a reference to the Kendo UI Validator, attach a custom event handler to the input element, and call the Validator validateInput() method, passing the respective input element, e.g.:

http://dojo.telerik.com/IwOqU/2

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress