Kendo Validation Client Validation on IE 9

5 posts, 0 answers
  1. Kenneth
    Kenneth avatar
    5 posts
    Member since:
    Jul 2013

    Posted 03 Sep 2013 Link to this post

    Hi,

    We are using Kendo Controls for MVC (kendo UI Version 2013.1.514)  in our project and we have some cross browser compatibility issue.

    Specifically, the Kendo client side validations (unobstrusive) does not work as expected in IE 9. Usually when you focus a required field control (textbox for instance) and move to the next control without entering data, the unobstrusive validation triggers  and shows the message. The same is true when you directly hit submit without entering any required fields.

    The application works fine in Chrome and Firefox but it does not work in IE 9.
    This is how we are triggering validate function.  
    $(document).ready(function () {
          var form = $("form");
          var validator = form.kendoValidator().data("kendoValidator");      
          $("#btnSubmit").click(function () {
              if (validator.validate()) {
                  form.submit();
              }
          });
      });
    View Model Binding
    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(true)
     
                    @Html.LabelFor(model => model.CompanyName)
                    <span>
                        @Html.EditorFor(model => model.CompanyName)
                        @Html.ValidationMessageFor(model => model.CompanyName)
                    </span>
    --- omitted for brevity
    <p>
                 <input id="btnSubmit" type="submit" value="Add Customer" />
            </p>
    }
    Attached other files for support.

    Any help is highly appreciated. Thanks.
  2. Kenneth
    Kenneth avatar
    5 posts
    Member since:
    Jul 2013

    Posted 04 Sep 2013 Link to this post

    Anyone from the product team?
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 05 Sep 2013 Link to this post

    Hi Kenneth,

    I have already answered the other support request that you have opened. I have tested the Kendo UI Validator inside IE 8 and IE9 (in IE8 mode) but the validation message seem to be shown correctly. Please check this demos for further reference:

    http://demos.kendoui.com/web/validator/index.html

    This is why I would like to ask you to extract a runnable sample representing the problem.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Nirman
    Nirman avatar
    1 posts
    Member since:
    Jan 2012

    Posted 13 Nov 2013 Link to this post

    this occurs when you use a control/widget like the autocomplete that utilizes the placeholder attribute in IE 9. 

    Since browsers below IE 10 do not natively support the placeholder attribute, the controls inserts a placeholder value for empty values, however this causes the validator to incorrectly evaluate the value for required validations.  

    What it should do is check for an empty string or if the value equates to the placeholder value.  

    <input name="locality" value="" validationMessage="Locality is required" required="required" placeholder="Required" />
    $("[name=locality]").kendoAutocomplete({
            dataSource:  {
                   transport: {
                    read: {
                      url: "http://domain.com/path/to/locality-service"
                    }
                   }
               }
    });
     
    // elsewhere
     
    var validator = $("#container").kendoValidator().data("kendoValidator");
     
    $("button:Contains(save)").click(function(e) {
           if(!validator.validate()) {
                    e.stopPropagation();
                    e.preventDefault();
                    return false;
           }
     
          // otherwise save or do something else.
    });
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 15 Nov 2013 Link to this post

    Hi Michael,

    This is a known limitation. As a possible solution I can suggest you to create a custom validation rule which checks whether the input's value is equal to the placeholder text. Alternatively you may disable the placeholder option.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready