Hola chicos, tratando de hacer clic en mi casilla de verificación antes de enviar mi botón, que es un clic para no enviar.
<form> <p> <input style="padding:14px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; width: 300px; border: none;" placeholder="Enter Date Here... eg 17/05/1981" /> </p> <p> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" required="true"> <label style="color: #fff; font-size: 10px;"> Please Accept Terms</label></p> <p><a id="generateButton" href="generate.html" class="progress-button red" data-loading="Creating..." data-finished="Start Over" data-type="background-vertical" onclick="getRandomImage()">Start Search</a></p> </form>Puede agregar lógica a su clickHandler para verificar que la casilla esté marcada. Entonces, en lugar de llamar a getRandomImage() directamente, agrega algo de lógica para llamar condicionalmente a la función.
function clickHandler() { // get the checkbox element from the DOM const checkboxElement = document.getElementById('vehicle3'); // see if the checkbox is checked if (checkBoxElement && checkBoxElement.checked) { getRandomImage(); } else { console.log("The checkbox wasn't checked!"); } } // add the handler to the button document.getElementById('generateButton').addEventListener('click', clickHandler);Desafortunadamente, HTML5 no proporciona una forma lista para usar de hacerlo.
Sin embargo, al usar jQuery o javascript, puede controlar fácilmente si un grupo de casillas de verificación tiene al menos un elemento marcado.
function myFunction() { document.getElementById("myCheck").required = true; } <form action="/action_page.php"> Checkbox: <input type="checkbox" id="myCheck" name="test"> <input type="submit" onclick="myFunction()"> </form>