AS my question says when I intentionally enter in a string that contains invalid characters, and the problem is that its placing the error message on the incorrect field..
So if you placed 87/9*8-=+ (or something to that effect) in the Zip field (where the Zip placeholder is)
and click the button, you'll see that the error message is on the City field, and not on the Zip field
Anyone know from this example why this is happening? (this is part of a lot more fields)
Thanks
$(document).ready(() => {
CreateValidation();
$("#btn").on("click", (e) => {
const val = $("#NewCustomer").getKendoValidator();
if (val) {
val.validate();
}
});
});
function CheckString(str) {
if (str.length == 0) {
return false;
} else {
const re = /^[a-zA-Z0-9\s\[\]\.\\="\-#']*$/;
return re.test(str);
}
}
function CreateValidation() {
const CustomerInputs = $("#NewCustomer").kendoValidator({
errorTemplate: ({
message
}) => `<span style="color:red">${message}</span>`,
messages: {
StringCheck: "Contains invalid characters",
required: ""
},
rules: {
StringCheck: function(input) {
if (input.is("[check-for=string]")) {
return CheckString(input.val());
}
return true;
}
}
}).getKendoValidator();
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.425/js/kendo.all.min.js"></script>
<div id="NewCustomer">
<div class="col-md-4">
<input id="txtCity" label-name="City" required check-for="string" type="text" class="form-control input-sm max-size" placeholder="City" />
</div>
<div class="col-md-4">
<input id="txtZip" required label-name="Zip" type="text" check-for="string" class="form-control input-sm" placeholder="Zip" />
</div>
</div>
<button id="btn">Click Me</button>In order for the custom error messages to work properly, you need to set a name attribute to the input element.
By doing so you can ckech if (input.is("[name='Zip']")) and the error messages will be displayed to the corresponding input - updated example.