是否应使用jQuery Dialog展示表单？及触发HTML5验证表单提交方法

首先，我注意到你代码里有个关键小错误：你把HTML5验证属性（比如pattern、required）加到了外层的div上，而不是实际的input元素上，这会导致验证完全不生效，得先把这个改过来。

接下来，要让Dialog的Submit按钮触发HTML5表单验证并执行自定义逻辑，我们可以按以下步骤调整：

步骤1：修正验证属性的绑定目标 #

把验证属性添加到input上，而不是包裹它的div：

function addRecord() {
    var form = $('<form name="frm_save" id="frm_save" autocomplete="off"></form>');
    var subject = $('<div class="form-group"><label class="control-label" for="title">Title:</label><input type="text" class="form-control" name="frm_title" id="frm_title"></div>');
    // 找到input元素，添加验证属性
    subject.find('input').attr({
        pattern: "[a-zA-Z][A-Za-z '.,-:()]{0,50}$",
        title: "Allowed characters: A-Za-z .,-():",
        maxlength: 50,
        required: true,
        placeholder: "Enter Title"
    });
    form.append(subject);
    // 给表单绑定submit事件，验证通过后会触发saveRecord
    form.on('submit', saveRecord);
    displayForm(form, 'Add Record');
}

步骤2：让Dialog的Submit按钮触发表单提交 #

修改Dialog里的Submit按钮点击事件，不再直接调用saveRecord，而是触发表单的submit()方法——这样会自动触发HTML5的表单验证：

function displayForm(msg, msgTitle, minH, width) {
    if (msgTitle == undefined) msgTitle = 'System Message';
    if (minH == undefined) minH = 100;
    if (width == undefined) width = 435;
    if (!$("#message-dialog").length) $("<div id='message-dialog'></div>").appendTo("body");
    $("#message-dialog").html(msg);
    $("#message-dialog").dialog({
        autoOpen: true,
        title: msgTitle,
        minHeight: minH,
        width: width,
        modal: true,
        position: { my: "center", at: "center", of: window },
        draggable: false,
        buttons: [{
            text: "Submit",
            class: "btn btn-primary",
            id: "btn_submit",
            click: function() {
                // 触发表单提交，先执行HTML5验证
                $("#frm_save").submit();
            }
        }, {
            text: "Close",
            class: "btn btn-primary",
            click: function() {
                $(this).dialog("close");
            }
        } ]
    });
}

步骤3：在saveRecord中处理自定义逻辑 #

现在，只有当HTML5验证通过后，saveRecord才会被调用。你可以在这里阻止默认提交，执行自定义检查，然后处理保存逻辑：

function saveRecord(e) {
    // 阻止表单的默认提交行为
    e.preventDefault();
    
    // 这里可以执行你的自定义检查
    console.log('HTML5验证通过，开始执行自定义检查和保存逻辑');
    
    // 示例：获取表单数据，用AJAX提交
    var formData = $("#frm_save").serialize();
    // $.ajax({
    //     url: '你的保存接口',
    //     type: 'POST',
    //     data: formData,
    //     success: function(response) {
    //         console.log('保存成功');
    //         $("#message-dialog").dialog("close");
    //     },
    //     error: function(xhr) {
    //         console.error('保存失败');
    //     }
    // });
    
    // 如果不需要AJAX，也可以手动触发表单提交（跳过默认验证，因为已经通过了）
    // $("#frm_save")[0].submit();
    
    // 处理完后关闭弹窗
    $("#message-dialog").dialog("close");
}

这样调整后，当你点击Dialog里的Submit按钮时，会先触发HTML5的表单验证：如果输入不符合规则，浏览器会弹出默认的验证提示；只有验证通过后，才会进入saveRecord执行你的自定义逻辑。

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