Editor Validation using kendoValidator

[Lalit]

Hi Experts,

    I am using kendo-validator to validate the input controls like (Textbox, Dropdown etc.)

The validation for empty field is working if i move one control to another control using Tab.

I needed that all validation for empty fields should triggered on form submit, not on Tab.

The sample code is below.

<div class="row">
    <div class="col-md-4">
        <form id="addfacility" asp-action="Add" kendo-validator="true">
            <div asp-validation-summary="ModelOnly" class="text-danger" style="width:900px;"></div>

            <div class="form-group" style="width:400px;">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" maxlength="200" style="width:300px" />
                @*<span asp-validation-for="Name" class="text-danger" style="width:500px"></span>*@
            </div>
            <div class="form-group" style="width:400px;">
                <label asp-for="Address.Address1" class="control-label"></label>
                <input asp-for="Address.Address1" class="form-control" maxlength="100" style="width:300px" />
                @*<span asp-validation-for="Address.Address1" class="text-danger"></span>*@
            </div>
            <div class="form-group" style="width:400px;">
                <label asp-for="Address.Address2" class="control-label"></label>
                <input asp-for="Address.Address2" class="form-control" maxlength="100" style="width:300px" />
                @*<span asp-validation-for="Address.Address2" class="text-danger"></span>*@
            </div>
            <div class="form-group" style="width:400px;">
                <label asp-for="Address.City" class="control-label"></label>
                <input asp-for="Address.City" class="form-control" maxlength="50" style="width:200px" required="required" title="City field is required."/>
                @*<span asp-validation-for="Address.City" class="text-danger"></span>*@
            </div>
            <div class="form-group">
                <label asp-for="Address.State" class="control-label"></label>

                @(Html.Kendo().DropDownListFor(x => x.SelectedStateId)
                                                                    .OptionLabel("--Please Select--")
                                                                    .DataTextField("Name")
                                                                    .DataValueField("EntityId")
                                                                    .BindTo(Model.StateList)
                                                                    .HtmlAttributes(new { required = "required", validationmessage = "The State field is Required.", @class = "form-control", style = "width: 200px;" })
                )

                @*<span asp-validation-for="SelectedStateId" class="text-danger"></span>*@

            </div>
            <div class="form-group">
                <label asp-for="Address.Zip" class="control-label"></label>
                <input asp-for="Address.Zip" class="form-control" maxlength="5" style="width:75px" />
                @*<span asp-validation-for="Address.Zip" class="text-danger"></span>*@
            </div>
            <div class="form-group">
                <label asp-for="Address.County" class="control-label"></label>
                <input asp-for="Address.County" class="form-control" maxlength="50" style="width:200px" />
                @*<span asp-validation-for="Address.County" class="text-danger"></span>*@
            </div>
            <div class="form-group" style="width:400px;">
                <label asp-for="Phone" class="control-label"></label>

                @(Html.Kendo().MaskedTextBoxFor(x => x.Phone)
                                                                    //.Name("Phone")
                                                                    .Mask("000-000-0000")
                                                                    .HtmlAttributes(new { @class = "form-control", style = "Width:130px" }
                                                                )
                        //.Value(Model.PhoneNumber.Number)
                )
                <span asp-validation-for="Phone" class="text-danger"></span>

            </div>
            <div class="form-group">
                <label asp-for="Ext" class="control-label"></label>
                <input asp-for="Ext" class="form-control" maxlength="4" style="width:75px" />
                @*<span asp-validation-for="Ext" class="text-danger"></span>*@
            </div>
            <div class="form-group">
                <label asp-for="Email" class="control-label"></label>
                <input asp-for="Email" class="form-control" style="width:300px" maxlength="255"/>
                @*<span asp-validation-for="Email" class="text-danger"></span>*@
            </div>
            <div class="form-group">
                <label asp-for="Status" class="control-label"></label>
                @(Html.Kendo().DropDownListFor(x => x.SelectedStatusId)
                                                                    //.Name("Status")
                                                                    .DataTextField("Text")
                                                                    .DataValueField("Value")
                                                                    .BindTo(Model.StatusList)
                                                                    .HtmlAttributes(new { @class = "form-control", style = "width: 130px;" })
                //.Value(Convert.ToString((int)Model.Status))

                )
                @*<span asp-validation-for="SelectedStatusId" class="text-danger"></span>*@
            </div>
            <div class="form-group">
                <label asp-for="Organization" class="control-label"></label>
                @(Html.Kendo().DropDownListFor(x => x.SelectedOrganizationId)
                                                                    .OptionLabel("--Please Select--")
                                                                    .DataTextField("Name")
                                                                    .DataValueField("EntityId")
                                                                    .BindTo(Model.OrganizationList)
                                                                    .HtmlAttributes(new { required = "required", validationmessage = "The Organization field is Required.", @class = "form-control", style = "width: 300px;" })

                )
                @*<span asp-validation-for="SelectedOrganizationId" class="text-danger"></span>*@

            </div>
            <div class="form-group">

                <label asp-for="FacilityType.Name" class="control-label"></label>
                @(Html.Kendo().DropDownListFor(x => x.SelectedFacilityTypeId)
                                                                    .OptionLabel("--Please Select--")
                                                                    .DataTextField("Name")
                                                                    .DataValueField("EntityId")
                                                                    .BindTo(Model.FacilityTypeList)
                                                                    .HtmlAttributes(new { required = "required", validationmessage = "The FacilityType field is Required.", @class = "form-control", style = "width: 300px;" })

                )
                @*<span asp-validation-for="FacilityType" class="text-danger"></span>*@
            </div>

            <div class="form-group">
                <br />
                <input type="submit" value="Add" class="btn btn-primary" />
                &nbsp;&nbsp;
                <input type="button" value="Cancel" class="btn btn-primary" onclick="location.href = '@Url.Action("Index", "Facility")'" />
            </div>
        </form>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Please help !!!

Thanks & Regards

Lalit Narayan

 

 

 

 

 

 

[Ianko]

Hello Lalit, 

You can set the kendo-validateOnBlur attribute to false in order to stop that behavior.

<form id="ticketsForm" kendo-validator="true" kendo-messages="messages" kendo-rules="rules" kendo-validateOnBlur="false">
    ...
</form>

There is documentation about that in the Kendo UI API: https://docs.telerik.com/kendo-ui/api/javascript/ui/validator/configuration/validateonblur.


Regards,
Ianko
Progress Telerik

[Lalit]

Thanks Lanko,

I just tried it but it still showing the required field validation message on tab out.

Please suggest.

Thanks

Lalit

[Ianko]

Hello Lalit,

Can you provide a simple project so that I can check it our? On my end the validateOnBlur attribute is working correctly. 

Regards,
Ianko
Progress Telerik

[Lalit]

Hi lanko,

It is working but now i am getting some another issue.

After click on submit button, it shows required field validation errors that all i wants.

now if user enters some value in TextBox and press tab to move another control then the error message is not clearing.

I want that error should be cleared as user gives input or select the control.

Thanks 

Lalit Narayan

[Ianko]

Hi Lalit,

Currently, only the message could be removed by using the hideMessages method. However, the invalid state will be still decorated. 

Typically, to remove the invalid decoration you should have a valid input and call the validateInput method. However, with widgets that have the input hidden the logic is to use the change event of the widget as the input's change event is never triggered. You can see a dojo example with plain Kendo widgets that accomplish what you need (re-validate on input and change events): https://dojo.telerik.com/aZoJuDeV. Although the dojo shows plain Kendo widgets, the same can be accomplished with the Telerik UI for ASP.NET Core as well, for the DropDownList you can just use the Change method to assign a handler. 

Regards,
Ianko
Progress Telerik