Search code examples
jquerytwitter-bootstrap-3bootstrapvalidator

Boostrap validator check for empty checkbox from multiple


I have multiple chekckbox which is fetching from db with name array[]. How can i set for empty check for multiple checkbox with same name? Here is some example for different inputs that it is not working, but normaly should work.

Here is the documentation for this

normaly should work with

'array[]': {
      validators: {
        notEmpty: {
          message: 'The array is required'
        },
        choice: {
          min: 1,
          max: 20,
          message: 'Please choose 1 - 20 topics'
        }
      }
}

$(document).ready(function() {
  $('#formz').bootstrapValidator({
      message: 'This value is not valid',
      //live: 'submitted',
      feedbackIcons: {
        valid: 'glyphicon',
        invalid: 'glyphicon',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        'firstinput': {
          validators: {
            notEmpty: {
              message: 'Choose from select'
            }
          }
        },
        'secondinput': {
          validators: {
            notEmpty: {
              message: 'type any text'
            }
          }
        },
        'array[]': {
          validators: {
            notEmpty: {
              message: 'The array is required'
            },
            choice: {
              min: 1,
              max: 20,
              message: 'Please choose 1 - 20 topics'
            }
          }
        },
      },
      onSuccess: function(e, data) {
        $(document).ready(function() {
          $('#spins').show();

        });

      }
    })
    .on('error.form.bv', function(e) {
      console.log('error.form.bv');

      var $form = $(e.target);
      console.log($form.data('bootstrapValidator').getInvalidFields());

      data.bv.disableSubmitButtons(false);
    })

    .on('error.field.bv', function(e, data) {
      console.log('error.field.bv -->', data);
      data.bv.disableSubmitButtons(false);
    });
});
<form method='post' action='' enctype="multipart/form-data" name='formz' id='formz'>
  <select name='firstinput'>
    <option value=''> first </option>
    <option value='1'> second </option>
    <option value='2'> third </option>
  </select>

  <input type="text" name="secondinput" />

  <input type="checkbox" name="array[]" />
  <input type="checkbox" name="array[]" />
  <input type="checkbox" name="array[]" />
  <input type="checkbox" name="array[]" />
  <input type="checkbox" name="array[]" />
  <input type="checkbox" name="array[]" />
  <input type="checkbox" name="array[]" />
  <input type="checkbox" name="array[]" />
  <button type="submit" class="btn btn-success btn-block">Apply</button>
</form>


Solution

  • I found mistake. All checkboxes should be inside <div class="form-group"> otherwise it is not working for bootstrapvalidator