1

Estoy trabajando con un formulario en el cual el botón de registro se debe habilitar cuando se cumplan dos condiciones. La primera es que debe estar el formulario completo y la segunda es que mediante un modal de Bootstrap5 se desplieguen condiciones, y para que el botón del formulario pase a estar habilitado y logre registrarme, antes se debe hacer clic en el botón del modal donde aceptarán las condiciones.

La primera condición ya está funcionando mediante una función de JavaScript, la cual creo que utilizándola puedo solucionar también la segunda opción de habilitar el formulario a través del botón del modal, pero no consigo resultados para hacer funcionar esta última situación.

Código HTML del formulario

<form action="" id="form" method="POST">
    <div class="input-field">
        <input name="user" type="text" placeholder="Ingresa tú usuario" id="user" required>
        <i class="uil uil-user"></i>
    </div>
    <div class="input-field">
        <input name="email" type="email" placeholder="Ingresa tú email" id="email" required>
        <i class="uil uil-user"></i>
    </div>

    <div class="input-field">
        <input name="password" type="password" placeholder="Ingresa tú contraseña" id="password" required>
        <i class="uil uil-envelope icon"></i>
    </div>




    <!-- Botón Modal -->
    <div class="login-signup" style="margin-top: 7%;">
        <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i
                class="uil uil-exclamation-circle" style="color: red;"></i>
            Ver condiciones
            <i class="uil uil-exclamation-circle" style="color: red;"></i></button>
    </div>





    <div class="bstr d-grid col-12 mx-auto" style="margin-top: 1%;">
        <button class="btn btn-primary" type="submit" id="btn" disabled>Enviar</button>
    </div>
</form>



<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-toggle="modal" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="btnModal">Aceptar
                    condiciones</button>
            </div>
        </div>
    </div>
</div>

Código JavaScript

let form = document.querySelector("#form");
let btn = document.querySelector("#btn");

function habilitar() {
    
    let desabilitar = false;

    if (form.user.value == "") {
        desabilitar = true;
    }

    if (form.email.value == "") {
        desabilitar = true;
    }

    if (desabilitar == true) {
        btn.disabled = true;
    } else {
        btn.disabled = false;
    }
}
form.addEventListener("keyup", habilitar)

Imágenes de referencia

Imagen de referencia

Modal

referencia2

2 respuestas 2

1

Puedes apoyarte de una variable booleana y cuando hagamos clic en el botón de aceptar condiciones, la variable será true y al no entrar al else if..., habilitaría el botón de enviar (mientras tanto no pasen por los anteriores else if...). Por ejemplo (reduje un poco el código de tus validaciones):

let form = document.querySelector("#form");
let btn = document.querySelector("#btn");
let btnModal = document.querySelector("#btnModal"); // capturo al botón de aceptar condiciones
let btnModalClicked = false; // inicializo el booleano en false

function habilitar() {
  btn.disabled = false;

  if (form.user.value == "") {
    btn.disabled = true;
  } else if (form.email.value == "") {
    btn.disabled = true;
  } else if (btnModalClicked == false) { // mientras el booleano esté en falso, el botón de enviar permanece deshabilitado.
    btn.disabled = true;
  } else {
    btn.disabled = false;
  }
}

// cuando hagamos clic al botón de aceptar condiciones...
btnModal.addEventListener("click", function() {
  btnModalClicked = true; // cambio el booleano a true...
  habilitar(); // y vuelvo a llamar a la función habilitar() para volver a validar con los if.
});

form.addEventListener("keyup", habilitar)
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<form action="" id="form" method="POST" class="p-3">
  <div class="input-field">
    <input name="user" type="text" placeholder="Ingresa tú usuario" id="user" required>
    <i class="uil uil-user"></i>
  </div>
  <div class="input-field">
    <input name="email" type="email" placeholder="Ingresa tú email" id="email" required>
    <i class="uil uil-user"></i>
  </div>

  <div class="input-field">
    <input name="password" type="password" placeholder="Ingresa tú contraseña" id="password" required>
    <i class="uil uil-envelope icon"></i>
  </div>

  <!-- Botón Modal -->
  <div class="login-signup" style="margin-top: 7%;">
    <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
      <i class="uil uil-exclamation-circle" style="color: red;"></i>
      Ver condiciones
      <i class="uil uil-exclamation-circle" style="color: red;"></i></button>
  </div>
  <div class="bstr d-grid col-12 mx-auto" style="margin-top: 1%;">
    <button class="btn btn-primary" type="submit" id="btn" disabled>Enviar</button>
  </div>
</form>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-toggle="modal" data-bs-dismiss="modal"
                aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="btnModal">Aceptar
          condiciones</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

2
  • 1
    Perfecto muchas gracias, ahí coloco tú código qué está más limpio y profesional qué el mío
    – Lucas
    Commented el 22 feb. 2023 a las 16:16
  • Aún se puede hacer más legible :-) un placer ayudarte, saludos! Commented el 22 feb. 2023 a las 16:17
1

Para habilitar el botón del formulario cuando se acepten las condiciones en el modal, puedes añadir un evento click al botón del modal y cambiar el atributo disabled del botón del formulario de acuerdo a si se ha hecho clic en el botón del modal o no. Puedes hacerlo de la siguiente manera:

let btnModal = document.querySelector("#btnModal");

btnModal.addEventListener("click", function() {
  btn.disabled = false;
});

En este código, se obtiene el botón del modal con document.querySelector, y luego se añade un evento click al botón con addEventListener. Cuando se hace clic en el botón del modal, se ejecuta la función proporcionada que establece el atributo disabled del botón del formulario en false, lo que lo habilita.

Recuerda colocar este código dentro del archivo JavaScript donde tienes la función habilitar() y las variables form y btn.

1
  • Muchas gracias compañero. Ahí funciona correctamente con tu ayuda. Una consulta se considera una consulta práctica tener la función del script como texto en el html. Te lo pregunto porque esa función la tenía en un archibo main.js pero parece que choca con otra función similar a la de habilitar el formulario y no funcionaba hasta que anulaba una. Por eso te consultaba si esta mal tener el script en el html. Saludos
    – Lucas
    Commented el 22 feb. 2023 a las 15:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.