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

Hi Team,

Found this issue with NumericTextBox. Please consider dojo: https://dojo.telerik.com/RSXrPCFH

When KendoValidator is initialised with validateOnBlur:false, KendoNumericTextBox looses .k-invalid class and associated style when moving out of field.

Try this:

1. Click button "Validate fields".

2. The 2 fields get red.

3. Click into second field (numeric) and then move out the field. The field looses its invalid status!

4. The other field (text) keeps its invalid status when doing the same.

Please advise.

Regards,

Laurent.

Hi,

We've using a Form component with an Upload component in it. The validation within the Upload works fine but we'd like to check whether a file has been uploaded and / or selected. The "required" part of the Form validation doesn't seem to trigger when no file is selected. Code provided is an item in the Form.

                    {
                        field: "mailingList",
                        label: "Mailing List",
                        colSpan: 2,
                        editor: function (container, options) {
                            $('<input type="file" name="' + options.field + '" id="' + options.field + '"/>').appendTo(container)
                                .kendoUpload({
                                    async: {
                                        saveUrl: "/rates-notices-campaign/save-attach/" + id,
                                        removeUrl: "/rates-notices-campaign/remove-attach/" + id,
                                        autoUpload: true
                                    },
                                    validation: {
                                        allowedExtensions: [".csv", ".xlsx"]
                                    }
                                });
                        },
                        validation: {
                            required: {
                                message: "Mailing List is required"
                            }
                        }
                    }

Thanks

let me explain what issue i am facing , i have two cloumns in kendogrid one is dropdown and other is simple textbox

let say dropodown column has (emailadress, website dropdown) now i want to match the exact expression of mail to the other column

if it matches then save the record if not matches than show the toolptip and prevent for saving changes

this is the code

save: function(e) {
                                    // Get the data item being saved
                                    var dataItem = e.model;

                                    // Access properties of the data item and perform actions accordingly
                                    var addressType = dataItem.intInternetAddressTypeID;
                                    var inputField = dataItem.strInternetAddress;

                                    // Perform validation or other actions based on the properties
                                    if (addressType === "2") {
                                        // Email validation for input field
                                        var emailRegex = /^[^\s@@]+@@[^\s@@]+\.[^\s@@]+$/;
                                        if (!emailRegex.test(inputField)) {
                                            // Set validation message on the corresponding cell
                                            e.container.find("[name=strInternetAddress]").closest("td").attr("data-strInternetAddress-msg", "Invalid email address format");
                                            e.preventDefault(); // Prevent saving the record
                                        }
                                    } else if (addressType === "10") {
                                        // Phone number validation for input field
                                        var phoneRegex = /^[0-9]+$/;
                                        if (!phoneRegex.test(inputField)) {
                                            // Set validation message on the corresponding cell
                                            e.container.find("[name=strInternetAddress]").closest("td").attr("data-strInternetAddress-msg", "Invalid phone number format");
                                            e.preventDefault(); // Prevent saving the record
                                        }
                                    }
                                },

i also enable the tooltip from databound
dataBound: function (e) {
   e.sender.element.find("[data-strInternetAddress-msg]").each(function () {
                                    $(this).kendoTooltip({
                                        position: "bottom",
                                        content: $(this).attr("data-strInternetAddress-msg"),
                                    });
                                });
}but tooltip is not showing in the page , it preventing from saving but not showing tooltip after inspection i found that it creating this html

<td role="gridcell" data-container-for="strInternetAddress" data-strinternetaddress-msg="Invalid email address format"><input type="text" class="k-input k-textbox k-valid" name="strInternetAddress" required="required" data-required-msg="Internet Address is required" data-bind="value:strInternetAddress"></td>


Help me how to show the tooltip not alert i dont want alert

Hi there! I'm not a developer but working with one to try and get a fix for my web application. This specific issue is not happening on any desktop computer but appears to be happening on my MacBook Pro when using Safari (not Chrome) and my 5th Gen iPad in both Safari and Chrome. When access a specific section of the program it begins to 'tab' through every field on that page endlessly. When I check the network log it states  'PerformValidationActions' appears to be in a loop cycling through 'text1_enter' 'text1_leave' 'text2_enter' 'text2_leave' 'text3_enter' 'text3_leave'  etc.  It EVENTUALLY ends but then when you try to log out you get the error Object reference not set to an instance of an object.

Any help would be GREATLY appreciated!

Hello Kendo Experts,

I'm currently working on integrating a Kendo JQuery Grid with an ASP.NET Core server-side setup that utilizes Fluent Validation for data validation. When submitting data via the grid, the server responds with a structured error message in case of validation failures, following this format:

My goal is to handle these validation errors and present them to the user in a user-friendly manner within the Kendo Grid interface. This involves processing the error messages received from the server and displaying them near the corresponding input fields for easy identification and correction by the user.

Could you kindly provide guidance or suggestions on how to achieve this? Any insights or examples on how to format and display these error messages effectively within the Kendo Grid would be greatly appreciated.

Thank you for your assistance.

I'm just migrating an application to ASP.NET Core. A couple of data forms in pop-up windows use a kendo validator. This works to validate fields and highlight required fields, but the validate function is returning false even though the error count is 0.

I'm using version v2023.3.1114 of Kendo UI for ASP.Net Core.

The validation code is:-

		var validator = $('#MetaDatafrm').kendoValidator({
			validationSummary: true,
			validate: function (e) {

				var dropDowns = $(".k-dropdown");

				$.each(dropDowns, function (key, value) {

					var input = $(value).find("input.k-invalid");

					var span = $(this).find("span.k-dropdown-wrap");

					if (input.length > 0) { //if there is an input in here with k-invalid...

						$(span).addClass("dropdown-validation-error");

					} else {

						$(span).removeClass("dropdown-validation-error");

					}

				});


			}
		}).getKendoValidator();

		var x = validator.validate();

		var errors = validator.errors();

		//alert(errors.length);

		if(errors.length==0)
		{
			x=true;
		}

		validator.showValidationSummary();

	

		if (x == false) {
			alert('Form has failed data validation. Please correct and try again');
			return;
		}

The form is loaded from a partial view loaded by:-

function editMetaData(rID, rs) {

	srcFilter=rs;

	var wind = $('#wndMetaDataEdit').data("kendoWindow");


	$('#btnSave').removeProp("disabled");
	 $('#errorMsg').hide();

	wind.refresh({
		url: "@Url.Content("~/Home/EditMetaData?reportID=")" + rID + "&src=" + rs 
		
	});
	wind.center();
	wind.open();



}

This code did work in a previous version (v2023.2.718) but that was ASP.NET MVC, not .Net core.

Hello kendo,

When an user is entering the date with an invalid format like dd.mm.yyyy (so 27.06.2023) into our datepicker, it looks like the date is accepted in the UI, but the value is actually empty. What is confusing for the user. To fix this we would like to clear the value when an user entered an invalid date. How can we do this ?

I found an example for the datetimepicker, but it requires an initial filled in date, if you start with an empty value it's not working. The problem comes from the problem that it's impossible to tell if the value is empy or invalid.

https://docs.telerik.com/kendo-ui/knowledge-base/prevent-invalid-values
PS the script has an bug and is not working, add to following to the script to get it working:   

        $("#datetimepicker").kendoDateTimePicker({
          change: onChange,
          close: onClose,
          open: onOpen,
          value: new Date()
        });
        var lastValidDate = $("#datetimepicker").data('kendoDateTimePicker').value();
      });
    </script> 

Regards,
Jeroen

Hai,

I have two questions : 

1) How can I change the width of a GridColumn, as show below? I am currently using GridColumn. Please find attached as reference.

2) How can I use Kendo UI to create a bar graph like the one shown below? The graph should update based on the user-entered values for total occurrence and time period (week/month). Does Kendo UI support this functionality?