TransWikia.com

Checkbox obrigatória ao apertar o botão

Stack Overflow em Português Asked by Vinícius Lodi on December 17, 2020

Eu gostaria de colocar uma checkbox obrigatória em html abaixo do botão de pagamento do meu site, gostaria que a pessoa só conseguisse continuar a compra se marcasse os termos de uso, caso contrário ele notifica que a pessoa não marcou a checkbox. Já tentei de tudo, não consigo, sou novo na área.

Meu botão de comprar:

            <button
         onclick="comprar('LINK DE PAGAMENTO')"
         class="plans-button"
         klickart-edit-not-highlight=""
         klickart-edit-link-type="default"
         klickart-edit-link-href-klickbox="#"
         klickart-edit-link-href-faq-question="#"
         id="klickart-linkikl6qk5g77k00"
         style="background-attachment: scroll; background-color: rgb(255, 64, 64);"
        >
         <span><b class="medium-b">QUERO ESSE PLANO!</b></span>
        </button>

Porém eu gostaria de colocar a checkbox abaixo do botão, nessa posição:

O código dessas escritas abaixo do botão é esse:

      <footer class="plans-info" id="klickart-collection-2cimijo2l8k000">
   <div class="info-item">
    <span class="icon-footer">
     <svg klickart-edit-icon="svg" enable-background="0 0 512 512" fill="#c0c0c0" viewbox="0 0 512 512">
      <path
       d="M436.064,77.014c-48.238-48.248-112.377-74.809-180.6-74.809c-68.221,0-132.36,26.561-180.599,74.809C26.623,125.25,0.056,189.388,0.056,257.61c0,68.223,26.567,132.36,74.809,180.597c48.238,48.237,112.378,74.807,180.599,74.807c68.223,0,132.362-26.57,180.6-74.807c48.242-48.237,74.809-112.375,74.809-180.597C510.873,189.388,484.305,125.25,436.064,77.014z M490.314,257.61c0,60.436-22.954,115.609-60.594,157.274L98.189,83.355c41.664-37.642,96.837-60.596,157.274-60.596C384.96,22.759,490.314,128.117,490.314,257.61z M20.615,257.61c0-61.677,23.913-117.868,62.938-159.818l331.726,331.733c-41.95,39.024-98.139,62.937-159.815,62.937C125.969,492.462,20.615,387.104,20.615,257.61z"
      ></path>
     </svg>
    </span>
    <span>Cancele seu plano <b class="medium-b">mensal</b> a qualquer momento e sem compromisso.</span>
   </div>
   <div class="info-item">
    <span class="icon-footer">
     <svg klickart-edit-icon="svg" fill="#c0c0c0" viewbox="0 0 512 512">
      <path
       d="M507.4 351.5l-64.6-64.6 10.7-12.3c8.2-9.5 12-25.8 8.7-37.9l-4.3-15.7c-1.6-5.7-1.6-16.5 0-22.2l4.3-15.7c3.3-12.2-0.4-28.4-8.7-37.9l-10.7-12.3c-3.9-4.5-8.6-14.2-9.6-20l-3-16c-2.3-12.4-12.7-25.4-24.2-30.4l-14.9-6.5c-5.4-2.4-13.9-9.1-17.3-13.8l-9.6-13.1c-7.1-9.7-21.6-16.9-33.7-16.9h-0.9l-16.8 0.7c-0.2 0-0.5 0-0.7 0 -6.1 0-15.8-2.3-20.8-5l-14.4-7.7c-5.4-2.9-12.3-4.5-19.4-4.5 -7.1 0-14 1.6-19.5 4.5l-14.3 7.7c-5 2.7-14.6 5-20.7 5 -0.3 0-0.5 0-0.9 0l-16.5-0.7c-0.3 0-0.7 0-1 0 -12.2 0-26.7 7.3-33.8 16.9l-9.6 13.1c-3.5 4.7-11.9 11.5-17.3 13.8l-15 6.5c-11.5 5-22 18.1-24.2 30.4l-3 16c-1.1 5.8-5.8 15.5-9.6 20l-10.6 12.3c-8.2 9.5-12 25.8-8.7 37.9l4.3 15.7c1.5 5.7 1.6 16.5 0 22.2l-4.3 15.7c-3.3 12.1 0.4 28.4 8.7 37.9l10.7 12.4 0.2 0.2L7.8 351.5c-5.9 6-8.3 14.2-6.3 22.1 2 7.9 8 14 16.1 16.5l64.5 19.2 19.2 64.5c3 10 11.8 16.8 22 16.8 6.2 0 12.1-2.5 16.6-7l77.9-78c2.3 0.7 4.3 1.5 5.8 2.3l14.4 7.7c5.4 2.9 12.3 4.4 19.5 4.4 7.2 0 14.1-1.6 19.4-4.4l14.4-7.7c1.6-0.9 3.8-1.7 6.2-2.4l78.1 78.1c4.5 4.5 10.4 7 16.6 7 10.2 0 19-6.7 22-16.7l19.2-64.5 64.5-19.2c8.1-2.4 14.1-8.6 16.1-16.5C515.7 365.7 513.3 357.5 507.4 351.5zM125.1 460.7l-19.8-66.3c-1.1-3.7-4.6-7.3-8.3-8.3l-66.4-19.8 52.2-52.2 1.6 8.9c2.3 12.4 12.7 25.4 24.2 30.4l15 6.5c5.4 2.3 13.8 9 17.3 13.8l9.6 13.1c6.6 9.1 19.9 16 31.6 16.8L125.1 460.7zM278.9 384.8l-14.4 7.7c-1.7 0.9-4.3 1.4-7.1 1.4 -2.8 0-5.5-0.5-7.1-1.4l-14.4-7.7c-1.4-0.7-2.8-1.4-4.2-1.9 -5.9-2.5-13.3-4.5-20.2-5.4 -3.1-0.5-6.1-0.7-8.8-0.7 -0.4 0-0.8 0-1.1 0h-0.6l-16.5 0.7h-0.2c-4.1 0-10.3-3.1-12.6-6.2l-9.6-13.1c-6.2-8.5-18.5-18.3-28.1-22.4l-14.9-6.5c-3.7-1.6-8.2-7.2-8.9-11.1l-3-16c-0.7-3.9-2.2-8.5-4.2-13.3 -3.1-7.4-7.3-14.3-11.4-19l-0.4-0.5 -10.3-11.9c-2.6-3-4.2-10-3.2-13.9l4.3-15.7c2.7-10 2.7-25.8 0-35.9l-4.3-15.7c-1-3.9 0.6-10.9 3.2-13.9l10.6-12.3c6.9-7.9 13.7-22.1 15.6-32.4l3-16c0.7-3.9 5.2-9.5 8.9-11.1l15-6.5c9.6-4.1 21.9-14 28.1-22.4l9.6-13.1c2.3-3.1 8.5-6.2 12.5-6.2h0.3l16.3 0.7c0.6 0 1.2 0.1 1.8 0.1 10.3 0 24.5-3.5 33.1-8l14.3-7.7c1.6-0.9 4.3-1.4 7.1-1.4 2.8 0 5.5 0.5 7.1 1.4l14.4 7.7c8.6 4.6 22.8 8.1 33.1 8.1 0.5 0 0.9 0 1.4 0h0.3l16.6-0.7h0.2c4 0 10.2 3.1 12.5 6.2l9.6 13.1c6.2 8.4 18.5 18.2 28.1 22.4l14.9 6.4c3.7 1.6 8.2 7.2 8.9 11.1l3 16c1.9 10.3 8.7 24.5 15.6 32.4l10.6 12.3c2.6 3 4.2 10 3.2 13.9l-4.3 15.7c-2.7 10.1-2.7 25.9 0 35.9l4.3 15.7c1 3.9-0.6 10.9-3.2 13.9l-10.3 11.8 -0.4 0.5c-6.8 7.9-13.7 22.1-15.6 32.4l-3 16c-0.7 3.9-5.2 9.5-8.9 11.1l-14.9 6.5c-9.6 4.1-21.9 14-28.1 22.4l-9.6 13.1c-2.3 3.1-8.5 6.2-12.5 6.2h-0.4l-16.3-0.7c-0.5 0-1.1 0-1.7 0 -8.7 0-20.4 2.4-29 6.1C281.6 383.4 280.2 384.1 278.9 384.8zM418.2 386c-3.7 1.1-7.2 4.6-8.3 8.3l-19.8 66.4 -57.2-57.2c11.6-0.9 24.6-7.8 31.1-16.8l9.6-13.1c3.5-4.8 11.9-11.5 17.3-13.8l15-6.5c11.5-5 22-18.1 24.2-30.4l1.7-9.3 52.6 52.6L418.2 386z"
      ></path>
     </svg>
    </span>
    <span>Satisfação garantida!</span>
   </div>
  </footer>
 </div>
</section>

One Answer

Adiciona o atributo required na tag html do campo que você deseja ser obrigatório

Exemplo:

<form action="#">
<input type="checkbox" name="myName" id="myId" required> Li e Concordo com os Termos de Licensa do Site
<br>
<br>
<input type="submit" value="Enviar">
</form>

Espero ter Ajudado

Answered by TheHatter on December 17, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP