当所有输入字段在 Hyperscript 中都有效时启用提交按钮？答案

【问题标题】：Enable submit button when all input fields are valid in Hyperscript?当所有输入字段在 Hyperscript 中都有效时启用提交按钮？
【发布时间】：2022-01-09 00:39:28
【问题描述】：

我正在使用 htmx 和超脚本，我希望在所有必需的输入字段在表单中都有效时启用“提交按钮”（添加用户）。在这种情况下，必须定义一个非空名称和一个有效的电子邮件地址。

<form hx-post="/example" hx-target="#table tbody" hx-swap="beforeend">
        <label class="control-label" for="nameInput">Name</label>
        <input id="nameInput" name="name" class="form-control" type="text" required placeholder="John Doe"/>
        
        <label class="control-label" for="emailInput">Email</label>
        <input id="emailInput" name="email" class="form-control" type="email" required placeholder="john@doe.org"/>
        <button _="<what should I write here??>" class="btn btn-primary" disabled>Add User</button>
    </div>
</form>

我应该写什么而不是 <what should I write here??> 来实现这一点？

【问题讨论】：

标签： htmx hyperscript

【解决方案1】：

这样的事情应该可以工作：

<button _="on change from closest <form/>
             for elt in <[required]/>
               if the elt's value is empty
                 add @disabled then exit
               end
             end
             remove @disabled" class="btn btn-primary" disabled>Add User</button>

https://jsfiddle.net/xy8vn5jk/20/

【讨论】：