Validator giving inconsistent results

1 Answer 28 Views
TextBox Validation
Russell
Top achievements
Rank 1
Iron
Iron
Iron
Russell asked on 14 Apr 2025, 04:39 PM

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

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 17 Apr 2025, 10:38 AM

Hello, Russell,

We had a bug in the Validator which was causing it to validate inputs across the entire page. The bug has been fixed for the next release, and we have a workaround which you can try until then.

Also, could you please try removing the highlighted part from the code below:

 if (!$(".k-edit-form-container").kendoValidator().data("kendoValidator").validate())
    {
        return false; // not valid
    }

As you are already creating the Validator with this code:

 validator =
            $(".k-edit-form-container").kendoValidator({

the previous one would be re-creating a Validator from the same HTML element, which would also cause unexpected behaviour.

Looking forward to your reply.

Regards,
Martin
Progress Telerik

Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!

Tags
TextBox Validation
Asked by
Russell
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Martin
Telerik team
Share this question
or