當所有輸入字段在 Hyperscript 中都有效時啟用提交按鈕?

約翰

我正在使用 htmx 和 hyperscript,我希望在表單中所有必需的輸入字段都有效時啟用“提交按鈕”(添加用戶)。在這種情況下,必須定義一個非空名稱和一個有效的電子郵件地址。

<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="[email protected]"/>
        <button _="<what should I write here??>" class="btn btn-primary" disabled>Add User</button>
    </div>
</form>

我應該寫什麼而不是<what should I write here??>讓這發生?

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/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用 Hyperscript 在提交時清除所有輸入字段

表單驗證有效,但當用戶輸入錯誤答案時仍會提交

當輸入字段聚焦時,按鈕被輸入字段隱藏

同時檢查所有文本字段並僅在有文本時啟用按鈕

當輸入具有某些值時更改 CSS

angular 將我所有的輸入字段放在同一行

當用戶在輸入字段中輸入以逗號分隔的值時。如何以列表格式顯示輸出

檢查是否所有輸入字段都填寫完畢,然後調用函數js

當輸入字段為空時,我如何仍然可以累加?

为什么按钮单击事件在所有版本中都有效,但在 Pie 中不起作用?

如何使用引導程序表單將所有輸入字段排列在一行中?

當用戶在輸入字段中輸入錯誤的名稱(不在 React 的 API 中)時如何顯示“未找到數據”

為按鈕設置屬性,但僅在我單擊兩次時才有效

在所有值存在的地方輸入 1 否則輸入 0

僅當特定輸入為空時如何禁用按鈕?

如果用戶在文本字段中輸入現有電子郵件,則應在 react js 中禁用按鈕

以每种语言编译时,在C和C ++中都有效的代码能否产生不同的行为?

这个正则表达式在 safari 上中断,但在 Google Chrome 中有效,我如何让它在两者中都有效

重写网址,并非所有网址都有效

驗證所有輸入項是否在 Python 中都是浮點數

禁用引导程序验证器的提交按钮,直到整个表单都有效

當用戶輸入數字時重複輸入類型文件

當用戶輸入不是 y 或 Y 的輸入時,如何讓 shell 程序退出?

雖然沒有輸入“Q”字符,但要求輸入一個數字,然後計算所有輸入

當輸入大於 9999 時,我需要輸出為“輸入的數字無效”

當使用javascript按下按鈕或(切換)時,我們如何選擇所有段落?

當用戶輸入錯誤輸入時,如何計算無效輸入的出現次數?

當用戶輸入來自粘貼板,iOS Swift 時,如何限製文本字段中的小數位數

vuetify:為什麼每當用戶單擊輸入字段時都會對錶格進行排序