I need at least one of these fields to be marked

Asked

Viewed 30 times

-2

Good afternoon, I need that when filling the data, at least one of these options is put as mandatory marking, I do not have much knowledge in the area, it may be something simple, but I’m catching rs! This is the code, where I am trying to change, I put a "Required" inside the input, but forces to mark the box, even if you do not have the data..



    <div class="selectBox" onclick="showCheckboxes()">
      <div class="overSelect"></div>
    </div>
        
        <div class="form-group col-md-3">
          <div class="form-check form-check-inline">
            <label class="form-check-label">Dados que possui no documento?</label><br>
          </div> 
        </div>      

                <div id="checkboxes">
                
      <label for="tem_cnpj">
        <input type="checkbox" id="tem_cnpj" name="tem_cnpj"/>&nbsp;Tem CNPJ?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <label for="tem_cpf">
        <input type="checkbox" id="tem_cpf" name="tem_cpf"/>&nbsp;Tem CPF?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <label for="tem_rg">
        <input type="checkbox" id="tem_rg" name="tem_rg"/>&nbsp;Tem RG?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <label for="tem_nome">
        <input type="checkbox" id="tem_nome" name="tem_nome"/>&nbsp;Tem nome?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <label for="tem_e-mail">
        <input type="checkbox" id="tem_email" name="tem_email"/>&nbsp;Tem e-mail?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <label for="tem_endereco">
        <input type="checkbox" id="tem_endereco" name="tem_endereco"/>&nbsp;Tem endereço?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <label for="tem_telefone">
        <input type="checkbox" id="tem_telefone" name="tem_telefone"/>&nbsp;Tem telefone?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <label for="nenhum">
        <input type="checkbox" id="nenhum" name="nenhum"/>&nbsp;Nenhum</label>              
                
                </div>      
                    </div> ```


[![Marcar pelo menos uma das opções para validar][2]][2]


  [1]: https://i.stack.imgur.com/2OcRT.jpg
  [2]: https://i.stack.imgur.com/g3ssw.png
php html css

  • Good afternoon Gustavo, I believe that you can use the checked attribute, you put it in one of the inputs and every time you update it will be selected, but da para ticar others and take this input too, look at the documentation of MDN : Mozzila

  • Thank you! Pity that when putting the checked it already comes automatically marked, I may be being very lay rs, but I would need that if none of the information was checked, include the block/ message requesting mark at least one option

  • discover how to ask a good question https://answall.com/help/how-to-ask and the survival guide at Sopt https://pt.meta.stackoverflow.com/questions/8045/guia-survivor%C3%Aancia-do-stack-overflow-em-inglés%C3%Aas

1 answer

0

You can add a Javascript script to validate your requirement. Something like:

function validarCheckGroup(){
  if(document.querySelectorAll('input[type="checkbox"]:checked').length == 0){
    alert('Selecione ao menos uma opção!');
  } else {
    alert('Pelo menos uma opção foi Selecionada!');
  }
}
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo</title>
  </head>
  <body>
    <div class="selectBox" onclick="showCheckboxes()">
      <div class="overSelect"></div>
    </div>
    <div class="form-group col-md-3">
      <div class="form-check form-check-inline">
        <label class="form-check-label">Dados que possui no documento?</label><br>
      </div> 
    </div>      

    <div id="checkboxes">
      <label for="tem_cnpj">
        <input type="checkbox" id="tem_cnpj" name="tem_cnpj"/>&nbsp;Tem CNPJ?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <label for="tem_cpf">
        <input type="checkbox" id="tem_cpf" name="tem_cpf"/>&nbsp;Tem CPF?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <label for="tem_rg">
        <input type="checkbox" id="tem_rg" name="tem_rg"/>&nbsp;Tem RG?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <label for="tem_nome">
        <input type="checkbox" id="tem_nome" name="tem_nome"/>&nbsp;Tem nome?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <label for="tem_e-mail">
        <input type="checkbox" id="tem_email" name="tem_email"/>&nbsp;Tem e-mail?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <label for="tem_endereco">
        <input type="checkbox" id="tem_endereco" name="tem_endereco"/>&nbsp;Tem endereço?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <label for="tem_telefone">
        <input type="checkbox" id="tem_telefone" name="tem_telefone"/>&nbsp;Tem telefone?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <label for="nenhum">
        <input type="checkbox" id="nenhum" name="nenhum"/>&nbsp;Nenhum</label>        
    </div>
    <input type="submit" onclick="validarCheckGroup()"/>
  </body>
</html>

Front-end validation does not replace back-end validation. It is always important to validate the information that arrives in your back end, since you have no control over the interface that was used to send you the data.

Browser other questions tagged php html css

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