Telerik Forums
Kendo UI for jQuery Forum
1 answer
34 views

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

Martin
Telerik team
 answered on 17 Apr 2025
1 answer
38 views

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.

Martin
Telerik team
 answered on 05 Feb 2025
0 answers
89 views

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});
        });

It would be really cool if by simply removing bootstrap.css from the web page, the entire page would automatically have the kendo ui theme applied or a single method could be called on the global kendo ui object like kendo.applyTheme(<theme-name>).
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
 updated question on 16 Aug 2024
1 answer
129 views

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)
   });

Martin
Telerik team
 answered on 29 Jul 2024
1 answer
76 views

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.

 

Martin
Telerik team
 answered on 07 Feb 2024
1 answer
1.1K+ views

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

 

 

 

 

 

 

 

 

Marco
Top achievements
Rank 1
Iron
 answered on 11 Jan 2024
1 answer
173 views

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

Martin
Telerik team
 answered on 09 Dec 2021
1 answer
420 views
 

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?

Nencho
Telerik team
 answered on 19 Oct 2021
1 answer
190 views

How can I extend this view with more fields?

Martin
Telerik team
 answered on 28 Jun 2021
1 answer
406 views

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

Georgi Denchev
Telerik team
 answered on 21 Jun 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?