Kendo UI Validation not working with a pattern for GUIDs

Question

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>

Answer 1

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.

Answer 2

An alternative is to use the Kendo MaskedTextBox:

$(document).ready(function() {
  $('input').kendoMaskedTextBox({
    label: 'GUID: ',
    mask: '0000000-0000-0000-0000-000000000000'
  });

  $('form').on('submit', function(e) {
    e.preventDefault();

    const validation = $(this).kendoValidator().data('kendoValidator');
    if (validation.validate()) {
      console.log('hooray');
    } else {
      console.log('awwww');
    }
  });
});

<link href="https://kendo.cdn.telerik.com/themes/6.3.0/default/default-main.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2023.1.425/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.425/js/kendo.all.min.js"></script>

<form>
  <input type="text" required="required" />
  <button type="submit">Submit</button>
</form>