es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo habilitar el botón de envío cuando todos los campos de entrada son válidos en Hyperscript?

¿Cómo habilitar el botón de envío cuando todos los campos de entrada son válidos en Hyperscript?

19 Jun, 2023 Programación

Estoy experimentando con htmx y hyperscript y quiero que el botón de “enviar” (Agregar usuario) esté habilitado cuando todos los campos de entrada requeridos sean válidos en un formulario. En este caso, se debe haber definido un nombre no vacío y una dirección de correo electrónico válida.

<form hx-post="/ejemplo" hx-target="#tabla tbody" hx-swap="beforeend">
        <label class="control-label" for="nameInput">Nombre</label>
        <input id="nameInput" name="nombre" class="form-control" type="text" required="" placeholder="John Doe">

    <label class="control-label" for="emailInput">Correo electrónico</label>
    <input id="emailInput" name="correo" class="form-control" type="email" required="" placeholder="john@doe.org">
    <button hx-vals="^:required" class="btn btn-primary" disabled="">Agregar usuario</button>
</form>

¿Qué debo escribir en lugar de <what should="" i="" write="" here??=""> para que esto suceda?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Puedes usar el atributo hx-vals para especificar los campos de entrada que deben ser validados antes de habilitar el botón de envío. Aquí está el código actualizado:

    <form hx-post="/ejemplo" hx-target="#table tbody" hx-swap="beforeend">
    <label class="control-label" for="nameInput">Nombre</label>
    <input id="nameInput" name="name" class="form-control" type="text" required="" placeholder="John Doe">

    <label class="control-label" for="emailInput">Correo electrónico</label>
    <input id="emailInput" name="email" class="form-control" type="email" required="" placeholder="john@doe.org">

    <button _="hyperscript" class="btn btn-primary" disabled="" hx-vals="#nameInput, #emailInput">
        Añadir usuario
    </button>
</form>

    En el atributo hx-vals, especificamos los IDs de los campos de entrada que deben ser validados para habilitar el botón.

Comments are closed.