当所有输入字段在超文本中有效时，启用submit按钮？

Question

我在玩htmx和hyperscript，当所有必需的输入字段都在表单中有效时，我希望启用"submit按钮“(Add )。在这种情况下，必须定义了一个非空名称和一个有效的电子邮件地址.

<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??>来实现这一点呢？

Answer 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/

Answer 2

我喜欢@1cg回答

我有比OP更严格的要求。

我所需要的是，当用户输入但不离开焦点时，按钮仍然应该禁用或正确启用。

如果使用keyup更明智，

因此我的版本是

<button _="on keyup from closest <form/> debounced at 150ms
            if (<[required]:invalid/>).length > 0
                add @disabled
                put 'Check All Fields' into me
                then exit
            end
            remove @disabled
            put 'Submit' into me
            " disabled type="submit">
              Fill Out Required Fields
</button>

https://codepen.io/simkimsia/pen/LYQgZZK

通过使用[required]:invalid和比较length，可以避免执行for循环和嵌套的if。请注意将([required]:invalid)括起来的括号