Validation for lookup controls?

[Casimodo]

Hi,

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.

Regards,

Kasimier Buchcik

[Casimodo]

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>
        </button>
        </span>
    </div>
    @Html.ValidationMessageFor(m => m.RawNumber)
    <script>
    "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 = [];
        args.push({
            name: 'SequenceNumberRangeId',
            value: item.SequenceNumberRangeId
        });
        args.push({
            name: 'Year',
            value: item.Year
        });
        args.push({
            name: 'DuplNum',
            value: item.DuplNum
        });
        casimodo.oDataFunction("odata/Contracts", "Ga.GetNextSequenceValueForContractRawNumber", args)
            .then(function(value) {
                inputs.val(value).change();
            });
    });
    </script>
</div>

 

With the following CSS:

div.input-selector-value {
    box-sizing:border-box;
    /* 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;

    width:100%;
}

    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.

Regards,

Kasimier Buchcik

[Rosen]

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.

Regards,
Rosen
Telerik