Hello,

Here is my validator code: 

<script type="application/javascript">
    $(document).ready(function () {
        console.log("Ready");
        // Initialize Kendo MaskedTextBox for Phone Number
        $("#PhoneNumber").kendoMaskedTextBox({
            mask: "000-000-0000"
        });

        // Set up Kendo Validator with a custom rule
        validator =
            $(".k-edit-form-container").kendoValidator({
                rules: {
                    phoneMaskRule: function (input) {
                        // Check if it is the PhoneNumber input and the value matches the mask
                        if (input.attr("name") === "PhoneNumber") {
                            var maskedInput = input.data("kendoMaskedTextBox");
                            // The masked textbox's `raw()` method gets the actual value without placeholder characters
                            // Checking that it has a complete value (no _ symbols in "raw" value)
                            var retVal = maskedInput && maskedInput.value() && maskedInput.raw().length === 10;
                            return retVal;
                        }

                        return true; // Let other fields validate as normal
                    },

                    nameValidation: function (input) {
                        // Check for FirstName and LastName validation
                        if (input.is("[name=UserFirstName]") || input.is("[name=UserLastName]")) {
                            var retVal = input.val().length > 2; //Ensure there is at least 2 characters in each name. 
                            console.log("Name: " +
                                (retVal ? "Passed" : "Failed"));
                            return  retVal;
                            
                        }
                        return true; // No other inputs are affected by this rule
                    },

                    emailFormatValidation: function (input) {
                        // Check for Email validation
                        if (input.is("[name=Email]")) {
                            // Regex for a basic email validation
                            var emailRegex =/^[a-zA-Z0-9._%+-]+@@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                            var retVal = emailRegex.test(input.val());
                            console.log("email: " +
                                (retVal ? "Passed" : "Failed"));
                            return retVal
                        }
                        return true; // Other inputs are skipped
                    }


                },
                messages: {
                    phoneMaskRule: "Please enter a valid phone number in the format 999-999-9999.",
                    nameValidation: "First and Last Name must have at least 3 characters.",
                    emailFormatValidation: "Please enter a valid email address."

                }
            }).data("kendoValidator");
    });
</script>

This validates the user input and usually works correctly. Once data is entered, I check the validator before submitting:

function submitClinic() {

    resetInactivityTimer(duration);
    if (model == null) {
        model = {};
        model.ClinicUserID = "";
    }
     // Check if form is valid 
    if (!$(".k-edit-form-container").kendoValidator().data("kendoValidator").validate())
    {
        return false; // not valid
    }
...
}

So for some reason, the validator starts returning "not valid" out of the blue. I can click through the form and see that the validator validates the fields correctly, but I press my submit button, and suddenly it claims the fields fail

I thought maybe the validator object is null, but it's clearly calling the validation functions, but for some reason it fails? Any suggestions would be very helpful.

Thanks!

Russ

We tried to apply the arabic conversion logic to the page. We have control like textbox, dropdown, date and grids with labels. The labels of all controls was changed without any issue. The grid column header caption and the data was also changed.

But the value inside the textbox, dropdown was not changed. Any guidance to resolve this issue.

I used the below code to enable the Google Translation in page.

function googleTranslateElementInit() {
                 new google.translate.TranslateElement({
                    pageLanguage: 'en',
                    includedLanguages: 'ar,en',
                    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
                 }, 'google_translate_element');
            }

I herewith shared a video for your reference.

If I include a certain kedo ui theme like default or nova or uniform in my asp.net mvc view/web page that uses kendo ui, then what would be the quickest way to apply the kendo ui theme to everything on the asp.net mvc view i.e. to the textboxes, buttons etc.?

The asp.net mvc view/web page is always applying boostrap theme to the textboxes, buttons etc, but I want to change it so that the kendo ui theme gets automatically applied to these textboxes, buttons etc.

I know that I could execute jquery code on document  ready event that looks for all elements in the web page and then changes each element to a corresponding kendo ui element (example code as below), but this would involve quite a bit of coding in jquery.

 $(document).ready(function () {
        let allElements = document.querySelectorAll("button,input,textarea");
        console.log("allElements length is " + allElements.length);
        for (let i=0; i < allElements.length; i++) {
            let emt  = allElements[i];
            emt.className = "";
            console.log("element tag name is " + emt.tagName);
             if (emt.tagName === "BUTTON") {
                 $(emt).kendoButton();
            } else if (emt.tagName === "INPUT" && (emt.getAttribute("type") === "text" || emt.getAttribute("type") === "password")) {
                 $(emt).kendoTextBox();
            } else  if (emt.tagName === "TEXTAREA" ) {
                 $(emt).kendoTextArea();
             }
        }
        $(".jumbotron").kendoResponsivePanel({breakpoint:769});
        });

Hi,

how to set focus to kendo TextBox widget when a kendo window opens?

I tried the following but no luck. The widget is selected and focused for a fraction of second and then selection and focus is magically removed.

   $(document).ready(function () {
       setTimeout(function () { $("#position").data("kendoTextBox").focus() }, 200)
   });

Can't I change Numerictextbox to kendoTextBox?

Can I change Numerictextbox to kendoTextBox format with special coding?

Please change numerictextbox in the url below to kendoTextBox.

https://dojo.telerik.com/uLIzaDag

Please enter coding in the area below /* start code */

It may be very easy or it may be very difficult.

Please make it a success. thank you.

Hi,

I upgraded my project from 2022.1.301 to 2022.2.621 and my text inputs lost there styling.

This markup worked fine with version 2022.1.301

<input type="text" id="gebruikersnaam" name="gebruikersnaam" class="k-textbox k-input" />

With the latest version it looks like the second input from above snippet.

It displays fine when i add the css class "k-input-solid":

<input type="text" id="gebruikersnaam" name="gebruikersnaam" class="k-textbox k-input k-input-solid" />

Do i have to update all my markup , or is this a bug?

Kind Regards,

Marco

This has been asked before here: https://www.telerik.com/forums/kendo-validator---focus-on-first-invalid-field

However, the given solution does not work with a kendoTextBox. 

If you use the example given in the previous post (http://dojo.telerik.com/ukoLUJ/4?_ga=2.193348590.2100086651.1638809904-402941789.1637689930) and replace the inputs with kendoTextBoxes and update the libraries to the latest version, they will not gain focus when invalid.

Any help would be appreciated, thanks,

Kevin

I use Kendo UI for build my single page web application. My application will add a tab when user click some menu if this menu will not in a tab list. I have a problem with my application when i use app in a period of time, the app gradually slow and slower. I found the reason is because when i add a new tab (with some kendoUI widget), the document will create some sub element in the end of document and i close the tab the widget in tab removed but the sub element will alive so the size of document increase by time used. 

Example 1 sub element:

<div class="k-list-container k-popup k-group k-reset" id="pfe6ef2c-9926-45e3-ac6d-8dcb5bb0855b-list" data-role="popup" style="display: none; position: absolute;" aria-hidden="true"><div class="k-group-header" style="display:none"></div><div class="k-list-scroller" unselectable="on"><ul unselectable="on" class="k-list k-reset" tabindex="-1" aria-hidden="true" id="pfe6ef2c-9926-45e3-ac6d-8dcb5bb0855b_listbox" aria-live="off" data-role="staticlist" role="listbox"><li tabindex="-1" role="option" unselectable="on" class="k-item k-state-focused" aria-selected="false" data-offset-index="0" id="dd8303f9-e1d7-4a3a-8e57-fb1478a5d9e0">20</li><li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="1">35</li><li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="2">50</li><li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="3">100</li></ul></div><div class="k-nodata" style="display:none"><div>No data found.</div></div></div>

Is there any solution to when remove the widget from document, the sub element removed too?

How can I extend this view with more fields?

Hi Telerik Team,

I'm using k-textbox for filtering rows in a grid.

We used custom filter when type in the filter textbox we make a server call to bind also when I click outside of the textbox on the grid page again the transport.Read event gets called when it lost focus.

Is there a way to prevent this ?

Thanks for your answer.

Regards,

Senthilkumar