Simple Custom Javascript Validation in Addition to Data Annotations

[Matt]

Hi there...

I have a strongly typed partial view that utilizes attribute based validations on the view model properties. In addition to the data annotation validation I need to make an asynchronous call to the web server to validate some info on the fly. If the response is false (indicating an incorrect value) I just want to display the "validation bubble" that informs the user of an incorrect entry. The true/false value is coming back correctly from the server but it is not raising the validation bubble if false.

<div id="datatovalidate">
    <div class="float-left editor-label">
        @Html.LabelFor(model => model.ProductCode)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.ProductCode, new { @class = "k-textbox" })
    </div>
    <div class="clear"></div>
</div>

$('#datatovalidate').kendoValidator({
        rules: {
            InvalidProdCode: function (input) {
                var isValid = true;

                if (input.is('[id=ProductCode]')) {
                    $productCode.val($productCode.val().toUpperCase());

                    if ($isPidx.prop('checked')) {
                        $.post('@UrlMaker.ToValidateProductCode()' + $productCode.val(), function (data) {
                            isValid = data;
                        });
                    }
                }

                return isValid;
            }
        },
        messages: {
            InvalidProdCode: "Invalid Product Code"
        }
    });

[Matt]

Has this been looked at yet? 

[Daniel]

Hello Matt,

You are using an asynchronous request so the result from the rule(true by default from the code) will be returned before the request is completed. Currently the Kendo Validator does not support Validation. Including this feature was previous suggested. You can vote for it and follow its progress here or create a new item. 
For now I can suggest either to use a synchronous request or use a flag and re-validate the input with the validateInput method once the request is completed. Another option is to show the message with custom code:

<script type="text/kendo-template" id="message">
<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
            <span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div></div>
</script>

var validationMessageTmpl = kendo.template($("#message").html());
$("[data-valmsg-for=" + name + "]")
            .replaceWith($(validationMessageTmpl({ field: name, message: "message"})))

Regards,
Daniel
the Telerik team

[Matt]

Thank you Daniel. The change to a synchronous call made the difference. I changed from $.post to $.ajax with the async flag set to false and that did the trick. I will be voting up the feature link you suggested though.