I am using Kendo UI Validation with the HTML5 pattern attribute, the pattern that I am using is for GUID’s, but its not working. If I type in 2 characters or even a single character, it will pass and it shouldn’t, it should only pass if its a GUID (427f519e-a21f-4a8a-a600-5f64ff7eb957), any idea what I am missing?
$(document).ready(() => {
$("#btn").on("click", (e) => {
const validation = $("#myDiv").kendoValidator().data("kendoValidator");
validation.validate();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.3.0/default/default-ocean-blue.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.425/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.425/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.425/js/kendo.all.min.js"></script>
<div id="myDiv">
<input id="txt" name="text field" required pattern="/^({){0,1}[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}(}){0,1}$/gi" />
</div>
<button id="btn">Click</button>
2
Answers
Set the input type:
<input id="txt" type="text" name="text field" required pattern="/^({){0,1}[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}(}){0,1}$/gi" />
Validation will then fire, but I’m getting a console error that the pattern is incorrect.
I also noticed jQuery is loaded twice, you can remove one of the references.
An alternative is to use the Kendo MaskedTextBox: