Can not specify Target of Validator

[Oliver]

Hello *,

I want to specifiy the target of the validation messages, but it will not be accepted. The default target looks bad with a DatePicker. In the attachment you can see that the Validation message from the Datetimepicker is next to the element instead of the nex line.

best regards

01.<!-- Modal -->
02.<div class="modal fade" id="modal-create-employment-status" tabindex="-1" role="dialog" aria-labelledby="modal-create-employment-status-label" aria-hidden="true">
03.    <div class="modal-dialog">
04.        <div class="modal-content">
05.            <div class="modal-header">
06.                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span></button>
07.                <h4 class="modal-title" id="modal-create-employment-status-label">@GlobalResources.Create</h4>
08.            </div>
09.            <div class="modal-body">
10.
11.                <form id="form-create-employment-status" class="form-horizontal" role="form">
12.
13.
14.                    <input type="hidden" id="employment-status-id" name="employment-status-id" />
15.
16.                    <div class="form-group">
17.                        <span class="k-invalid-msg" data-for="from"></span>
18.                        <span class="k-invalid-msg" data-for="dropdown-employee"></span>
19.                    </div>
20.
21.                    <div class="form-group">
22.                        <label for="dropdown-employee" class="col-sm-4 control-label">@GlobalResources.Employee</label>
23.                        <div class="col-sm-4">
24.                            <input class="" id="dropdown-employee" name="employee" required=""/>
25.                        </div>
26.                    </div>
27.
28.                    <div class="form-group">
29.                        <label for="from" class="col-sm-4 control-label">@GlobalResources.From *</label>
30.                        <div class="col-sm-4">
31.                            @(Html.Kendo().DatePicker()
32.                                  .HtmlAttributes(new { required = "" })
33.                                  .Name("from")
34.                                  .Format("yyyy-MM-dd")
35.                                  )
36.                        </div>
37.                    </div>
38.
39.                    <div class="form-group">
40.                        <label for="to" class="col-sm-4 control-label">@GlobalResources.To</label>
41.                        <div class="col-sm-4">
42.                            @(Html.Kendo().DatePicker()
43.                                  .Name("to")
44.                                  .Format("yyyy-MM-dd")
45.                                  )
46.                        </div>
47.                    </div>
48.
49.                    <div class="form-group">
50.                        <label for="marginal-employment" class="col-sm-4 control-label">@GlobalResources.MarginalEmployment</label>
51.                        <div class="col-sm-4">
52.                            <label class="checkbox">
53.                                <input id="marginal-employment" type="checkbox" class="" name="marginal-employment">
54.                            </label>
55.                        </div>
56.                    </div>
57.
58.                    <div class="form-group">
59.                        <label for="amount-of-employment" class="col-sm-4 control-label">@GlobalResources.AmountOfEmployment</label>
60.                        <div class="col-sm-4">
61.                            @(Html.Kendo().NumericTextBox()
62.                                  .IncreaseButtonTitle(GlobalResources.Increase)
63.                                  .DecreaseButtonTitle(GlobalResources.Decrease)
64.                                  .Name("amount-of-employment")
65.                                  .Format("p")
66.                                  // .Min(0)
67.                                  )
68.                        </div>
69.                    </div>
70.
71.                    <div class="form-group">
72.                        <label for="dropdown-qualification" class="col-sm-4 control-label">@GlobalResources.Qualification</label>
73.                        <div class="col-sm-4">
74.                            <input class="" id="dropdown-qualification" name="qualification" />
75.                        </div>
76.                    </div>
77.
78.                </form>
79.            </div>
80.            <div class="modal-footer">
81.                <button type="button" class="btn btn-default" data-dismiss="modal">@GlobalResources.Cancel</button>
82.                <button type="button" class="btn btn-primary" onclick="$('#form-create-employment-status').submit();">@GlobalResources.Save</button>
83.            </div>
84.        </div>
85.    </div>
86.</div>

001.openEditModal: function(event) {
002.    event.preventDefault();
003.    var dataItem = this.dataItem($(event.currentTarget).closest("tr"));
004.
005.    $("#dropdown-employee-list").remove();
006.    $("#dropdown-employee").kendoDropDownList({
007.        dataTextField: "Text",
008.        dataValueField: "Value",
009.        dataSource: {
010.            transport: {
011.                read: {
012.                    dataType: "json",
013.                    url: "/Employee/GetEmployee?employeeId=" + dataItem.EmployeeId
014.                }
015.            },
016.            schema: {
017.                data: "items",
018.                total: "count"
019.            }
020.        },
021.        value: dataItem.EmployeeId
022.    });
023.    $("#dropdown-qualification-list").remove();
024.    $("#dropdown-qualification").kendoDropDownList({
025.        dataTextField: "Text",
026.        dataValueField: "Value",
027.        dataSource: {
028.            transport: {
029.                read: {
030.                    dataType: "json",
031.                    url: "/Employee/GetQualifications"
032.                }
033.            },
034.            schema: {
035.                data: "items",
036.                total: "count"
037.            }
038.        },
039.        value: dataItem.Qualification.Id
040.    });
041.
042.    $("#from").kendoValidator({
043.        rules: {
044.            //implement your custom date validation
045.            dateValidation: function (input) {
046.                var currentDate = kendo.parseDate($(input).val(), "dd.MM.yyyy", "de-DE");
047.                //Check if Date parse is successful
048.                if (!currentDate) {
049.                    return false;
050.                }
051.                return true;
052.            }
053.        },
054.        messages: {
055.            //Define your custom validation massages
056.            required: "Das Feld Von ist erforderlich!",
057.            dateValidation: "Datumsformat ungültig!"
058.        }
059.    });
060.
061.    $("#dropdown-employee").kendoValidator({
062.        rules: {
063.            //implement your custom date validation
064.            dateValidation: function (input) {
065.                var currentDate = kendo.parseDate($(input).val(), "dd.MM.yyyy", "de-DE");
066.                //Check if Date parse is successful
067.                if (!currentDate) {
068.                    return false;
069.                }
070.                return true;
071.            }
072.        },
073.        messages: {
074.            //Define your custom validation massages
075.            required: "Das Feld Angestellter ist erforderlich!",
076.            dateValidation: "Datumsformat ungültig!"
077.        }
078.    });
079.
080.    // fill up fields
081.    $("#employment-status-id").val(dataItem.EmploymentStatusId);
082.    $("#from").data("kendoDatePicker").value(dataItem.From);
083.    $("#to").data("kendoDatePicker").value(dataItem.To);
084.    if (dataItem.MarginalEmployment) {
085.        $("#marginal-employment").prop('checked', true);
086.    }
087.    else {
088.        $("#marginal-employment").prop('checked', false);
089.    }
090.
091.    $("#amount-of-employment").data("kendoNumericTextBox").value(dataItem.ContractPercent);
092.    //
093.
094.    $("#form-create-employment-status").unbind("submit");
095.    $("#form-create-employment-status").submit(function (e) {
096.        e.preventDefault();
097.        $.ajax({
098.            type: "POST",
099.            url: "/Employee/UpdateOrCreateEmploymentStatus",
100.            data: $("#form-create-employment-status").serialize()
101.        }).done(function (data, textStatus, jqXHR) {
102.            $('#EmploymentStatusGrid').data('kendoGrid').dataSource.read();
103.            $('#EmploymentStatusGrid').data('kendoGrid').refresh();
104.            $('#modal-create-employment-status').modal('hide');
105.        })
106.        .fail(function (jqXHR, textStatus, errorThrown) {
107.            alert(errorThrown);
108.        });
109.    });
110.
111.    $('#modal-create-employment-status').modal('show');
112.}

[Kiril Nikolov]

Hello Oliver,

You can specify custom position for the validator, using the following approach:

http://docs.telerik.com/kendo-ui/getting-started/framework/validator/overview#customizing-the-tooltip-position

Regards,
Kiril Nikolov
Telerik

 

 

[Oliver]

I have tried the example in the documentation but this does not work.

Here is a fiddle: http://jsfiddle.net/mkeuschn/e5mA2/

best regards

[Kiril Nikolov]

Hello Olivier,

The problem comes from the fact that both the input being validated and the span that will hold the validation message must be in the same container. Furthermore it is more appropriate to use the form container to initialize the validator, as this way you will not need to initialize validator for every single input.

Here is the updated example:

http://jsfiddle.net/e5mA2/4/

Regards,
Kiril Nikolov
Telerik

 

 

[Oliver]

With Razor I am not able to set the span element near to the input so I am forced to use plain HTML?

<div class="form-group">
    <label for="from" class="col-sm-4 control-label">@GlobalResources.From *</label>
    <div class="col-sm-4">
        @(Html.Kendo().DatePicker()
              .HtmlAttributes(new { required = "" })
              .Name("from")
              .Format("yyyy-MM-dd")
              )
        <span class="k-invalid-msg" data-for="from"></span>
    </div>
</div>

[Matt Miller]

Even your demo is behaving like this. The validation message for the "To" date picker says "From Date is Required". Am i missing something here? I am running into this same issue.

[Kiril Nikolov]

Hello Matt,

The issue discussed in this topic is different than the one you describe. If you want to customize the messages, then you can use the messages configuration option of the validator:

http://docs.telerik.com/kendo-ui/api/framework/validator#configuration-messages

If this is not the case, please open a separate forum topic/support ticket where you better describe the issue that you are facing and we will be able to assist you.

Regards,
Kiril Nikolov
Telerik