CODEWITHSUNDEEP
javascriptvalidationkendo-uihidden-field
user2109254
user2109254

Reputation: 1759

How do I get KendoUI Validator to ignore hidden form elements?

I am attempting to use KendoUI Validator with an ASP.NET WebForms project. I have a simple page, that has a number of inputs, and of course ASP.NET adds some hidden form elements as well.

I have the following questions:

  1. Why does the KendoUI Validator not ignore hidden form fields, and how to I get it to?
  2. Why does KendoUI apply the rules to every input field, and how to do get it to ignore some fields. I want a declarative way to do this, not by adding all sorts of exceptions in my validation rule, as per the example in the KendoUI Validator API page.
  3. Shouldn't it be that if no rule is set as an attribute in the input element (eg; required) then no validation is applied?

Behavior I am getting:

I am using the following kendo:

http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js
http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js
http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css
http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css

I have put together a fiddle that demonstrates this: http://jsfiddle.net/codeowl/B5ML4/3/

And here is the code, for those that don't have access to fiddle:

I have the following markup:

<form action="/" id="testForm">
    <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
    <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

    <input type="text" id="testInput" value="">
    <a id="testValidate" href="javascript:;">Validate</a>
</form>

and the following script:

var validatable = $("#testForm").kendoValidator({
    rules: {
        testRule1: function (input) {
            // Only "Tom" will be a valid value for the FirstName input
            return input.is("[name=firstname]") && input.val() === "Tom";
        },
        testRule2: function (input) {
            return $.trim(input.val()) !== "";
        }
    },
    messages: {
        testRule1: "Your name must be Test",
        testRule2: "Your name must be Foo"
    }
}).data("kendoValidator");

$("#testValidate").click(function () {
    if (validatable.validate()) {
        alert('passed');
    }
});

and when I press the validate link it shows validation messages for the hidden fields.

Upvotes: 2

Views: 11827

Answers (3)

TSport
TSport

Reputation: 21

validator._inputSelector=
  ":input:not(:button,[type=submit],[type=reset],[disabled],[readonly],[type=hidden],:hidden)
  [data-validate!=false]

This will not validate hidden controls. Kendo 2018 version

Upvotes: 2

Nasser Hadjloo
Nasser Hadjloo

Reputation: 12630

I'm writing this for new comers.

Simply make hidden inputs disabled

$('#hidden_input').prop('disabled', true) // won't check in kendo or standard jquery validation

$('#hidden_input').prop('disabled', false) // will check in kendo or standard jquery validation

Upvotes: 2

user2109254
user2109254

Reputation: 1759

For anyone interested, I did eventually get a response to this question. I had to post it on the KendoUI Premium Forums to get someone to respond.

Here is the response: How do I get KendoUI Validator to ignore hidden form elements?

Indeed, the hidden input elements are passed through the validation rules logic by default due to the fact that there are multiple widgets which has a hidden input as part of there markup. However, as the built-in rules relays on the presence of certain attributes, if there are missing no validation will happen on the hidden inputs. Therefore, your own custom rules should handle this scenario and skip the appropriate elements. For example:

testRule2: function (input) {
    if (!input.is(":hidden")) {
        return $.trim(input.val()) !== "";
    }
    return true;
}

Upvotes: 3

Related Questions