How to use bootstrap to validate whether at least one checkbox is checked?-CodePudding

I have 2 checkboxes and they are required fields but the user only has to check at least one. How do I group the two checkboxes together so that it checks that at least one of them is checked?

form:

<form >
   <label>Appointment Type (Select all that apply)</label> </br>
   <label for="eye_exam">Eye Exam</label>
   <input type="checkbox" name="eye_exam" value="eye_exam">
   <label for="contact_lens_check">Contact Lens Check</label>
   <input type="checkbox" name="contact_lens_check" value="contact_lens_check">
</form>

Example of my bootstrap for a different field (that works fine)

$('#addAppointmentFrom').formValidation({
   framework: 'bootstrap',
      icon: {
               valid: 'glyphicon glyphicon-ok',
               invalid: 'glyphicon glyphicon-remove',
                   validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 firstname: {
                         validators: {
                             notEmpty: {
                                     message: 'First Name is required'
                             },
                             // regexp: {
                             //regexp: /^[^*|\":<>[\]{}`\\()';@&$] $/,
                             //message: 'The First Name can only consist of alphabetical charecters'
                             // },
                             }
                          },

CodePudding user response：

Change classes and other stuff with your own. and If you know little bit of HTMl and JS then you can easily customize it.

Have a great day :0

  document.getElementById('myFrom').addEventListener('submit', function(e){
        e.preventDefault();    
    let checkboxSelector = document.querySelectorAll('.mincheckbox-validator input[type="checkbox"]');
    let minimumChecked = 1; // set minimum checked number

    checkboxSelector.forEach(function(index){
      if(index.checked == true){
        minimumChecked--;
        console.log(minimumChecked);
      }
    })
    if(minimumChecked <= 0){
            this.submit();
    }else{
            alert("Please Check minimum "   minimumChecked   " more checkboxe!");
    }
    
  })

<form id="myFrom" >
   <label>Appointment Type (Select all that apply)</label><br>
   <label for="eye_exam">Eye Exam</label>
   <input type="checkbox" name="eye_exam" value="eye_exam">
   <label for="contact_lens_check">Contact Lens Check</label>
   <input type="checkbox" name="contact_lens_check" value="contact_lens_check">
   <br>
   <input type="submit" value="submit">
</form>

CodePudding user response：

It looks like you're using the FormValidation plugin. If so, check out the examples section. It seems like it will do what you want.