Validation for lookup controls?

3 posts, 0 answers
  1. Casimodo
    Casimodo avatar
    71 posts
    Member since:
    Mar 2015

    Posted 13 Nov 2015 Link to this post


    we're using custom grid popup editors where he have lots of different lookup controls (well not really controls, but just text with buttons).

    E.g. a text-box with a button: ​one ​uses that button and it fetches a new sequence number and display that number.

    Or a text-box with a customer name and a button: one uses that button and selects a customer from a customer-lookup dialog; the customer name goes into the text-box and the customer's ID goes into a hidden form field.

    How to display validation errors w.r.t. *required* constraints for such common scenarios?

    Easiest way would be to have text-input elements instead of text-boxes and mark those as required and readonly. But HTML5 defines readonly inputs as being immutable. Which makes me wonder how to provide an input element for validation? Or can this be achieved without input elements?

    Essentially the lookup dialogs (maybe together with the selector buttons) are the input elements. Has this been addressed anywhere in the HTML5 spec?

    I.e. what about input that does not live on the current form?

    What about wizards with complex steps which may lead to a final form with completely broken constraints, but one cannot inform the user of those, because - according to HTML5 - obviously a readonly input cannot be wrong. Doesn't make sense to me.


    Kasimier Buchcik

  2. Casimodo
    Casimodo avatar
    71 posts
    Member since:
    Mar 2015

    Posted 13 Nov 2015 in reply to Casimodo Link to this post

    Here's what I managed to implement today:

    <div class='col-sm-9 col-xs-12' data-container-for='RawNumber'>
        <div class='input-group'>
            <div class='input-selector-value'><span readonly data-bind='text:RawNumber'></span></div>
            <input id='RawNumber' name='RawNumber' data-bind='value:RawNumber' class='k-input k-valid' type='text' style='display: none;' aria-disabled='false' aria-readonly='false' data-val-required="Das Feld 'Nummer' ist erforderlich." />
            <span class='input-group-btn'>
                                    <button class='btn btn-default' id='editor-btn-for-RawNumber' data-bind='enabled: isRawNumberSelectorEnabled'>
    <span class='glyphicon glyphicon-search'></span>
        @Html.ValidationMessageFor(m => m.RawNumber)
        "use strict";
        // Sequence value generator for RawNumber
        var inputs = $("input[name='RawNumber']");
        $('#editor-btn-for-RawNumber').click(function(e) {
            var item = inputs.first().prop('kendoBindingTarget').source;
            var args = [];
                name: 'SequenceNumberRangeId',
                value: item.SequenceNumberRangeId
                name: 'Year',
                value: item.Year
                name: 'DuplNum',
                value: item.DuplNum
            casimodo.oDataFunction("odata/Contracts", "Ga.GetNextSequenceValueForContractRawNumber", args)
                .then(function(value) {


    With the following CSS:

    div.input-selector-value {
        /* input.k-textbox{height:2.43em}. */
        height: 2.43em;
        border: 1px solid #ccc;
        border-radius: 4px 0px 0px 4px;
        padding-left: 9px;
        margin-top: 1px;
        margin-bottom: 1px;
        div.input-selector-value > span {
            line-height: 2.43em;
    .btn {
        font-size: 13px;
        padding-bottom: 5px;
    .k-ff input.k-textbox {
        height: 2.43em;


    This look ok now for my scenario where I need "required" constraint validation. So HTML5's way is to make inputs invisible to make things work ;-) I still don't get it.


    Kasimier Buchcik

  3. Rosen
    Rosen avatar
    3216 posts

    Posted 18 Nov 2015 Link to this post

    Hello Casimodo,

    Indeed, the Kendo Validator can validate only input elements which are inside the container to which the widget is attached. However, it will not validate readonly/disabled inputs (similar to the way browser handles validation) as the user cannot change their value. You could indeed use non visible inputs which will be validated. I'm glad that you have manged to find solution for your scenario.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top