Required in checkbox

Asked

Viewed 186 times

-1

Good morning, I’m here with a question regarding forcing my checkbox to be filled.

inserir a descrição da imagem aqui

i am using the required and works in every field except at checkbox.

Name field code (functional) - <input type="text" name="nome" placeholder="Nome..." required=" " >

Checkbox code (not functional) - <label style="margin-top:10px;" class="checkbox"><input required=" " type="checkbox" name="termos" value="1"><i> </i>Eu li e aceito os <a href="/termos_condicoes">termos e condições</a></label>

html

  • I couldn’t reproduce that problem, the required works normally at the checkbox, since any other required previous has been filled in correctly. Here is a print: https://i.ibb.co/F5WMK47/captur2.png, using the code you specified yourself.

  • Why use required=" " and not just required?

1 answer

2


Using Javascript you can validate the checkbox. Here is an example:

<!doctype html>
  <head>
	<title>Validar checkbox</title>
  </head>
  <body>
    <form>
		<p><input id="termos" type="checkbox" required name="terms"> Eu aceito os termos e condições</u></p>
		<p><input type="submit" value="Enviar"></p>
	</form>
  </body>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function(e) {
    var myCheckbox = document.getElementById("termos");
    var myCheckboxMsg = "Você precisa aceitar os termos e condições";
    myCheckbox.setCustomValidity(myCheckboxMsg);
    myCheckbox.addEventListener("change", function(e) {
      this.setCustomValidity(this.validity.valueMissing ? myCheckboxMsg : "");
    }, false);
 }, false);
	
</script>

  • solved, thank you very much!

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.