Kendo Validation Client Validation on IE 9

[Kenneth]

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.

[Kenneth]

Anyone from the product team?

[Kiril Nikolov]

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

[Nirman]

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.

});

[Alexander Valchev]

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