skip to Main Content

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


  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.

    Login or Signup to reply.
  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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search