javascript – Validate checkbox fields with Bootstrap validator

Question:

I'm trying to use Bootstrap validator on checkbox fields, but I don't know how to do it. Is there any 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:

In order for you to use the bootstrap validator, first, you must have its js library specified in your html file (but in this case, it looks like you already have it).

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

data-toggle="validator"

After you specify the attribute above in the <form> tag, you must also put the required attribute and the data-error attribute in the <input> tag, for example:

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

And to finish the correct use of the 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 will have the validator activated and working for each field you specify these items.

I'll leave a little code below 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>