Validate checkbox fields with Bootstrap Validator

Question

I’m trying to use Bootstrap Validator in the checkbox fields, but I don’t know how to do it. Is there a function in this library that does this or should I do the validation in pure JS?

Code:

<div class="form-check">
   <div class="checkbox">
      <label for="ingles" class="form-check-label">
      <input type="checkbox" id="ingles" name="idioma" value="ingles" class="form-check-input">Inglês
      </label>
   </div>
   <div class="checkbox">
     <label for="espanhol" class="form-check-label ">
     <input type="checkbox" id="espanhol" name="idioma" value="espanhol" class="form-check-input">Espanhol
     </label>
   </div>                                   
</div>

Answer 1

For you to use bootstrap Validator, first, you must have its js library specified in your html file (but in this case, it seems that you already have it).

After that, you need to specify in your field <form> the following attribute:

data-toggle="validator"

After you specify in tag <form> the above attribute, you should also put in the tags <input> the attribute required and the attribute data-error as an example:

data-error="Esse item é inválido"

And to end the correct use of validator, below each <input> (after closing the tag), you create a div with the class help-block with-errors as in the example below:

<div class="help-block with-errors"></div>

Then you’ll be with the validator activated and running for each field you specify these items.

I will leave below a small code with the requirements and attributes already ready for the validator.

<script src="js/validator.min.js"></script>

<form data-toggle="validator" role="form">

<div class="form-group">
    <label for="email" class="control-label">Informe seu E-mail</label>
    <input type="email" class="form-control" id="email" placeholder="E-mail" data-error="Informe um e-mail válido." required>
    <div class="help-block with-errors"></div>
  </div>

Answer 2

Missed the data-toggle="validator" in the <form>, in your case at <div class="form-check">

It can also be done by Jquery using $('.form-check').validator();