50 lines
1.6 KiB
HTML
50 lines
1.6 KiB
HTML
{% if validation_modal %}
|
|
<dialog class="validation-dialog" data-validation-dialog>
|
|
<form method="dialog" class="validation-dialog-card">
|
|
<p class="eyebrow">需要确认</p>
|
|
<h2>{{ validation_modal.title }}</h2>
|
|
<p class="small-muted">当前输入已保留。关闭这个窗口后，页面会高亮需要修改的位置。</p>
|
|
|
|
<ul class="validation-dialog-list">
|
|
{% for message in validation_modal.messages %}
|
|
<li>{{ message }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
<div class="button-row top-gap">
|
|
<button class="primary-button" type="submit">返回修改</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<script>
|
|
(() => {
|
|
const dialog = document.querySelector("[data-validation-dialog]");
|
|
if (!dialog) {
|
|
return;
|
|
}
|
|
|
|
const focusFirstInvalid = () => {
|
|
const control = document.querySelector(
|
|
"[data-field-error='true'] input:not([type='hidden']), [data-field-error='true'] select, [data-field-error='true'] textarea, [data-field-error='true'] button"
|
|
);
|
|
if (!control) {
|
|
return;
|
|
}
|
|
control.scrollIntoView?.({behavior: "smooth", block: "center"});
|
|
control.focus?.({preventScroll: true});
|
|
};
|
|
|
|
dialog.addEventListener("close", () => {
|
|
focusFirstInvalid();
|
|
});
|
|
|
|
if (typeof dialog.showModal === "function" && !dialog.open) {
|
|
dialog.showModal();
|
|
return;
|
|
}
|
|
|
|
dialog.setAttribute("open", "open");
|
|
})();
|
|
</script>
|
|
{% endif %} |