I'm playing around with htmx and hyperscript and I want the "submit button" (Add User) to be enabled when all required input fields are valid in a form. In this case, a non-empty name and a valid email address must have been defined.
<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 instead of <what should I write here??> to make this happen?
Something like this should work:
<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>