将jQuery UI Dialog按钮改为表单提交按钮的实现问题

嘿，这个问题我之前也碰到过，确实用隐藏提交按钮触发点击的方式有点啰嗦，其实咱们可以利用HTML5的特性或者原生API来更优雅地解决，给你两个实用的方案：

方案一：直接给Dialog按钮设置form属性和type="submit" #

HTML5的form属性允许不在表单标签内的按钮关联指定表单，只要你给表单设置一个id，就能让Dialog里的按钮直接触发该表单的验证和提交。

假设你的表单id是myForm，初始化Dialog时可以这样配置按钮：

$("#myDialog").dialog({
  buttons: [
    {
      text: "提交表单",
      type: "submit", // 设置按钮类型为submit
      attr: {
        form: "myForm" // 关联目标表单的id
      },
      click: function() {
        // 验证通过后自动提交表单，这里只需关闭对话框即可
        $(this).dialog("close");
      }
    }
  ]
});

这样设置后，点击Dialog里的按钮就和点击表单内的原生提交按钮效果完全一致：会自动触发HTML5表单验证，验证通过后提交表单，不需要额外的隐藏按钮或手动提交逻辑。

方案二：手动触发表单验证API #

如果因为某些原因没法用form属性，你也可以借助HTML5原生的表单验证API来实现相同效果，代码也很简洁：

$("#myDialog").dialog({
  buttons: [
    {
      text: "提交表单",
      click: function() {
        const targetForm = document.getElementById("myForm");
        
        // 检查表单是否符合验证规则
        if (targetForm.checkValidity()) {
          targetForm.submit();
          $(this).dialog("close");
        } else {
          // 触发浏览器默认的验证错误提示
          targetForm.reportValidity();
        }
      }
    }
  ]
});

checkValidity()会返回表单是否通过验证的布尔值，reportValidity()则会弹出浏览器原生的验证提示框，和点击原生提交按钮的体验一致。

注意事项 #

不管用哪个方案，都要确保表单内的输入元素正确设置了HTML5验证属性，比如required、pattern、type="email"等，这样验证逻辑才能正常生效。

内容的提问来源于stack exchange，提问作者Soujirou