This is a migrated thread and some comments may be shown as answers.

Simple Custom Javascript Validation in Addition to Data Annotations

3 Answers 308 Views
Validation
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 06 Feb 2013, 07:40 PM
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"
        }
    });

3 Answers, 1 is accepted

Sort by
0
Matt
Top achievements
Rank 1
answered on 07 Feb 2013, 10:41 PM
Has this been looked at yet? 
0
Accepted
Daniel
Telerik team
answered on 08 Feb 2013, 05:12 PM
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!
0
Matt
Top achievements
Rank 1
answered on 08 Feb 2013, 06:03 PM
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.
Tags
Validation
Asked by
Matt
Top achievements
Rank 1
Answers by
Matt
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or