Simple Custom Javascript Validation in Addition to Data Annotations

4 posts, 1 answers
  1. Matt
    Matt avatar
    3 posts
    Member since:
    Oct 2012

    Posted 06 Feb 2013 Link to this post

    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"
            }
        });
  2. Matt
    Matt avatar
    3 posts
    Member since:
    Oct 2012

    Posted 07 Feb 2013 Link to this post

    Has this been looked at yet? 
  3. Kendo UI is VS 2017 Ready
  4. Answer
    Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 08 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Matt
    Matt avatar
    3 posts
    Member since:
    Oct 2012

    Posted 08 Feb 2013 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready