Telerik Forums
Kendo UI for jQuery Forum
1 answer
93 views

Hi, following on from http://www.telerik.com/forums/why-is-the-span-position-static#NeKbtFbNzUGLtgZqX1kKmg

I notice that if the name attribute is removed, for example, http://dojo.telerik.com/IyoVU/5 then the tooltip is again disappearing.  Does the validation require that elements have the name attribute? 

Alex Hajigeorgieva
Telerik team
 answered on 24 Jan 2017
6 answers
301 views

I have a problem with the tooltip validation appearing in front of some elements and behind others (e.g. input kendo-numeric-text-box).  When I look at the CSS for the span that holds the tooltip it has a z-index of 9999 which looks good, but then it has position:static .  From what I've read around the internet  e.g. https://css-tricks.com/almanac/properties/p/position/

z-index only works when the position is not static.  Indeed if I add

span .k-tooltip-validation {
    position: relative;
}

 

then it appears in front of the numeric text box.  Why is relative not the default setting for the tooltip?

 

Thanks

Scott Waye
Top achievements
Rank 2
Veteran
Iron
 answered on 20 Jan 2017
3 answers
211 views

When you update an MVVM model using the proper "set" method, any validators tied to controls tied to the model do not fire. I'm assuming it is because the validator is wired to the "blur" event of the textbox. I would prefer to not wire the validator to the "change" event, if possible.

For example, I have a textbox that is required. If I blank out the value, the validator fires correctly. If there is some other action that changes the model, the validator does not re-execute and therefore remains.

I've made a simple Dojo that represents this.Blank out the textbox, tab or click out, and then click the "Alter Model" button.

http://dojo.telerik.com/oVEgE

Ianko
Telerik team
 answered on 22 Dec 2016
1 answer
493 views

Hi,

I noticed, that when using a validation for kendo grid fields, only some fields get the k-invalid class. This can be easily seen on the demo page: http://demos.telerik.com/kendo-ui/grid/editing-custom-validation .

All the empty fields are correctly validated, but only ProductName fields has the k-invalid class. The Unit Price and Units In Stock don't (they still kave the k-valid class, although there is tooltip saying that field is required). So my problem is that I want to style invalid fields with red background etc, and it simply doesn't work for numeric fields.

Is that a known issue? Any workarounds for now?

 

Thanks,

Pawel

Dimiter Topalov
Telerik team
 answered on 05 Oct 2016
5 answers
465 views

Hi,

 

I need to validate that one or more checkboxes have been checked in a group. I read some other relative threads about that in this forum but I can't find my way with the responses. I was thinking it was something close to the way we do with radio-buttons, so I just replaced type=radio with type=checkbox in the following dojo example: http://dojo.telerik.com/uHEto

It seems that kendo.validate() does not pass on input type=checkbox (except when already checked !) and it appears to be an issue to me.

Note that I want to make this checkboxes' validation with kendo validator, not on an event like onsubmit for instance.

 

thank you for your help

Ianko
Telerik team
 answered on 30 Sep 2016
7 answers
855 views
His this possible?

My doubt is very simple. I would like that when the form is submit (on button click), if there is validation errors, every field in error should be marked with and asterisk (*) and a summary of messages should be displayed on some placeholder on the view. Is this possible out of the box or will it have to be implemented in some way?

This would be done using UI for ASP.NET MVC wrappers and data annotations on the models.

Thanks!
Rosen
Telerik team
 answered on 25 Aug 2016
5 answers
981 views

Hello,

I have a textbox with a simple required field validator using kendo. I would like to style it using a new CSS class created by us like this:

<span class="label">Name:</span>
<input type="text" name="Name" class="k-textbox" required data-required-msg="Please enter a name." />
<span class="k-invalid-msg k-x-invalid-msg-block" data-for="Name"></span>

The problem is that whenever the validation happens our CSS class named k-x-invalid-msg-block is removed from the tooltip span or replaced by another HTML construct that looks like this:

<span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" data-for="Name" role="alert">
<span class="k-icon k-warning"> </span>
Please enter a name.
</span>

As you can see our k-x-invalid-msg-block is gone. Is this on purpose? What is the preferred way of styling the tooltip then?

All I would like to do is add a "display:block;" since I need to display the tooltip below the input.

Kind regards,

Krisztián

Rosen
Telerik team
 answered on 26 Jul 2016
5 answers
240 views

In a Kendo Grid, I have a column that contains a date.  I'm using this method for inserting my own control into the cell to edit the date:

function dateTimeEditor(container, options)
{
    console.log("options", options);
    $('<input data-text-field="' + options.field + '" '
      + 'data-value-field="' + options.field + '" '
      + 'data-bind="value:' + options.field + '" '
      + 'data-format="' + options.format + '" '
      + '/>')
        .appendTo(container)
        .kendoDateTimePicker(
        {
            format: "MM/dd/yyyy",
            parseFormats: [ "yyyy/MM/dd", "MM/dd/yyyy", ],
        });
} 

In the column definition I have this:

{
    field: "probeDate",
    title: "Probe Date",
    width: 60,
    format: "{0:MM/dd/yyyy}",
    editor: dateTimeEditor,
    attributes: { class: "editable-cell" },
}

So far this works great.  Now I wanted to add custom validation to this control, so in the model I have a field defined like this:

type: "date",
editable: true,
validation:
{
    validateProbeDate: function (input)
    {
        if (console != undefined) { console.log(input); }
 
        // Validate the probeDate as well as all of the dynamic fields.
        if (input.val().trim() === "" || parseDate(input.val()) == null )
        {
            input.attr("data-validateProbeDate-msg",
                       "Probe Date must be a valid date value (mm/dd/yyyy or yyyy/mm/dd).");
            return false;
        }
        // TODO: Make sure the date falls within the bounds of the probe.         
        // return new Date(input.val()) < probeStartDate...
 
        return true;
    }
}

This works as far as the validation as it doesn't allow me to leave the field unless my validation method returns true, but the error message won't show on the field and I've tried several methods to try to get it to show up.  I assume the problem is in dateTimeEditor() where I'm defining the date edit control.

You can see this in action in this fiddle: Probe Data Entry

Thanks in advance!
Scott
Top achievements
Rank 2
 answered on 23 Jun 2016
1 answer
68 views

I have currently added the following custom validation to my interest name, but interest name has to be unique, so when user add new and existing interest name is already there, it will throw error. However, when user try to edit the record, it should be able to detect whether current interest name is changed, if it is a new interset name then only check only uniqueness validation, otherwise, it should allow the update to go through successfully.

With the following validation, when i try to perform update, it also throw the validation error, and i am do not know how to make this validation valid for Add New all the time, and valid for Update only when interest name is changed.

    (function ($, kendo) {
        $.extend(true, kendo.ui.validator, {
            rules: { // custom rules
                InterestNamevalidation: function (input, params) {
                    if (input.is("[name='InterestName']") && input.val() != "") {
                        var dataSource = $("#Customer").data("kendoGrid").dataSource;
                        var data = dataSource.data();

                        for (var i = 1; i < data.length; i++) {
                            if ($.trim(input.val().toLowerCase()) == $.trim(data[i].InterestName.toLowerCase())) {
                                input.attr("data-InterestNamevalidation-msg", "InterestName should be unique");
                                return false;

                            }
                        }
                    }
                    return true;
                }
            }
        });
    })(jQuery, kendo);

Georgi Krustev
Telerik team
 answered on 23 May 2016
6 answers
528 views
Hi,

I have a survey app where I need to validate if the number of checked checkboxes is in the valid interval.
The min/max values are set in an admin interface and are available as data attributes of the input field.
The fields also have a data attribute which stores the question id which they belong to, so they can be filtered by question.

So basically it looks like this:
<input type="checkbox" value="option1" data-question="1" data-min="1" data-max="3">
<input type="checkbox" value="option2" data-question="1" data-min="1" data-max="3">
<input type="checkbox" value="option3" data-question="1" data-min="1" data-max="3">
<input type="checkbox" value="option4" data-question="1" data-min="1" data-max="3">
<input type="checkbox" value="option5" data-question="1" data-min="1" data-max="3">

What would be the best practice to handle this?

Best Wishes,
Matt
Kiril Nikolov
Telerik team
 answered on 20 Apr 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?