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

Problem with editor template and validation don't disappear

1 Answer 109 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dany
Top achievements
Rank 1
Dany asked on 28 Feb 2017, 03:02 AM

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>

1 Answer, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 01 Mar 2017, 02:18 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Dany
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or