Can not specify Target of Validator

7 posts, 1 answers
  1. Oliver
    Oliver avatar
    19 posts
    Member since:
    Sep 2013

    Posted 16 May 2014 Link to this post

    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.}


  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 19 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Oliver
    Oliver avatar
    19 posts
    Member since:
    Sep 2013

    Posted 21 May 2014 in reply to Kiril Nikolov Link to this post

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

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

    best regards
  5. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 21 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Oliver
    Oliver avatar
    19 posts
    Member since:
    Sep 2013

    Posted 21 May 2014 Link to this post

    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>
  7. Matt Miller
    Matt Miller avatar
    23 posts
    Member since:
    Jan 2012

    Posted 13 Aug 2014 Link to this post

    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.
  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 14 Aug 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready