Tengo varios formularios html similares al siguiente
<div class="container"> <div class="card"> <div class="card-header bg-danger"> <h3 class="card-title">Form Four</h3> </div> <div class="card-body"> <div class="errors"> <!-- Error messages can go here --> </div> <form novalidate> <div> <label for="password">Password : </label> <input type="text" name="password" id="password" class="password" /> </div> <div> <label for="requiredPassword">Required and Password : </label> <input type="text" name="requiredPassword" id="requiredPassword" class="required password" /> </div> <div> <input type="submit" name="submitBtn" value="Validate" /> </div> </form> </div> </div> </div>No tengo permitido cambiarlos. El problema que tengo es que no puedo hacer que mis detectores de eventos funcionen. Estoy tratando de hacer clic en el botón para el formulario específico solo validar ese formulario y no los demás.
Esto es con lo que he estado tratando de trabajar posiblemente en base a otros proyectos que he hecho con varios botones.
document.querySelectorAll("input[name=submitBtn]").forEach(item => { item.addEventListener('click', isAllValid) //isAllValid is a function to check the inputs in the form });Esto no está funcionando, y realmente necesito ayuda para tratar de averiguar cómo hacer que esto funcione. ¡Gracias!
Para encontrar el formulario que pertenece al botón, dentro de isAllValid , puedes hacer esto:
function isAllValid(event) { const btn = event.target; const form = btn.closest('form'); // ... }Uno de los atributos de los elementos de formulario es form que devuelve una referencia al formulario al que pertenece cada uno de estos elementos.
Consulte el siguiente ejemplo con varios formularios.
var buttons = document.querySelectorAll("button"); buttons.forEach((button) => { button.addEventListener("click", (event) => { event.preventDefault(); var msg = event.currentTarget.textContent; var form = event.currentTarget.form; console.log("'" + msg + "' clicked (" + form.id + ")"); return false; }); }); button { margin: 0.5rem; } <section> <form id="firstForm" name="firstForm"> <button id="firstFormButton1">Button 1 (Form 1)</button> <button id="firstFormButton2">Button 2 (Form 1)</button> <button id="firstFormButton3">Button 3 (Form 1)</button> </form> </section> <section> <form id="secondForm" name="secondForm"> <button id="secondFormButton1">Button 1 (Form 2)</button> <button id="secondFormButton2">Button 2 (Form 2)</button> <button id="secondFormButton3">Button 2 (Form 2)</button> </form> </section> <section> <form id="thirdForm" name="thirdForm"> <button id="thirdFormButton1">Button 1 (Form 3)</button> <button id="thirdFormButton2">Button 2 (Form 3)</button> <button id="thirdFormButton3">Button 3 (Form 3)</button> </form> </section>