jQuery UI对话验证,不使用<form>标签

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="my-dialog">
 <label for="username">用户名：</label>
 <input type="text" id="username" name="username" required>
 <label for="password">密码：</label>
 <input type="password" id="password" name="password" required>
 <button id="submit-btn">提交</button>
</div>

$(function() {
  $("#my-dialog").dialog({
    autoOpen: false,
    modal: true
  });
});

$(function() {
  $("#my-dialog").validate();
});

$(function() {
  $("#submit-btn").click(function() {
    if ($("#my-dialog").valid()) {
      // 表单验证通过后的操作
    }
  });
});