Validate checkbox fields with Bootstrap validator

1

I'm trying to use the Bootstrap validator in the checkbox fields, but I'm not sure how to do it. Is there a function in this library that does this or should I validate 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>
    
asked by anonymous 04.05.2018 / 13:52

2 answers

0

data-toggle="validator" was missing in <form> , in your case in <div class="form-check">

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

    
04.05.2018 / 14:10
0

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

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

data-toggle="validator"

After specifying in the <form> tag the above attribute, you should also put in the <input> tag the required attribute and the data-error attribute such as:

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

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

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

Then you will have validator enabled and working for each field you specify these items.

I'll leave a small code below with the requirements and attributes already ready for 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>
    
04.05.2018 / 14:52