基于HTMX的Web表单：如何在请求处理或字段未填时置灰按钮？

以下是满足你需求的完整实现方案，包含输入内容校验和请求过程状态反馈功能：

<html>
<head>
    <title>example</title>
    <script src="https://unpkg.com/htmx.org@1.7.0"
            integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo"
            crossorigin="anonymous"></script>
    <style>
        /* 加载指示器样式 */
        .loading {
            display: none;
            inline-size: 16px;
            block-size: 16px;
            border: 2px solid #ccc;
            border-top-color: #333;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-inline-end: 8px;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        /* 禁用状态样式优化 */
        button:disabled, input:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
<h1>Hello World!!!</h1>

<div id="main">
    <button hx-get="/button1" hx-target="#main">
        Get stuff
    </button>
</div>

<div id="main2">
    <form>
        <label for="search">label:</label>
        <input id="s1" name="q" type="search" placeholder="one">
        <input id="s2" name="q2" type="search" placeholder="two">
        <button id="searchBtn" hx-post="/button2" hx-target="#main" hx-trigger="click, keyup[enterKey] from:body" disabled>
            <span class="loading"></span>
            Search
        </button>
    </form>
</div>

<script>
    // 1. 输入校验：仅双输入非空时激活按钮
    const s1 = document.getElementById('s1');
    const s2 = document.getElementById('s2');
    const searchBtn = document.getElementById('searchBtn');

    function checkInputs() {
        const hasValidContent = s1.value.trim() !== '' && s2.value.trim() !== '';
        searchBtn.disabled = !hasValidContent;
        return hasValidContent;
    }

    // 绑定输入事件监听
    s1.addEventListener('input', checkInputs);
    s2.addEventListener('input', checkInputs);

    // 2. 请求过程中控制状态与加载动画
    document.body.addEventListener('htmx:beforeRequest', function(event) {
        if (event.target.id === 'searchBtn') {
            searchBtn.disabled = true;
            searchBtn.querySelector('.loading').style.display = 'inline-block';
            // 禁用输入框防止中途修改
            s1.disabled = true;
            s2.disabled = true;
        }
    });

    document.body.addEventListener('htmx:afterRequest', function(event) {
        if (event.target.id === 'searchBtn') {
            // 恢复按钮状态（基于当前输入内容）
            searchBtn.disabled = !checkInputs();
            searchBtn.querySelector('.loading').style.display = 'none';
            // 恢复输入框可用
            s1.disabled = false;
            s2.disabled = false;
        }
    });
</script>
</body>
</html>

功能说明 #

一、输入内容校验

• 初始状态下搜索按钮为禁用状态
• 监听两个输入框的input事件，实时检查输入内容：只有当两个输入框都填入非空内容时，按钮才会被激活
• 校验逻辑会自动忽略输入内容中的首尾空格

二、请求过程状态反馈

• 利用HTMX的生命周期事件htmx:beforeRequest：在请求发起时，禁用搜索按钮和输入框，同时显示旋转加载动画
• 利用htmx:afterRequest事件：请求完成后，恢复按钮和输入框的可用状态，隐藏加载动画
• 加载动画通过CSS实现，无需额外资源

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