Checkbox validation

morellik asked 5 years ago

Is it possible to validate a group of checkbox where you can choose on or more options?I would that if I don't select at least a checkbox I receive the message that I've to select at least one item.


morellik answered 5 years ago

I did it with a snippet of js code.


MDBootstrap staff pro premium priority commented 5 years ago

Hi, Can you share the snippet with us so I can understand what exactly you want to accomplish?


morellik answered 5 years ago

  <div class="form-row">
                        <div class="custom-control custom-checkbox mb-3">
                            <input type="checkbox" class="custom-control-input" id="my_match3" name="nsdc" required value="Negative staining data collection" onchange="checkRequired();">
                            <label class="custom-control-label" for="my_match3">Negative staining data collection</label>
                            <div class="invalid-feedback">Select at least a service.</div>
                        </div>

                    </div>
                    <div class="form-row">
                        <div class="custom-control custom-checkbox mb-3">
                            <input type="checkbox" class="custom-control-input" id="my_match4" name="cemsv" required value="Cryo-EM specimen vitrification on Vitrobot MkIV (9 grids max)" onchange="checkRequired();">
                            <label class="custom-control-label" for="my_match4">Cryo-EM specimen vitrification on Vitrobot MkIV (9 grids max)</label>
                            <div class="invalid-feedback">Select at least a service.</div>
                        </div>

                    </div>
                    <div class="form-row">
                        <div class="custom-control custom-checkbox mb-3">
                            <input type="checkbox" class="custom-control-input" id="my_match5" name="cemgs" required value="Cryo-EM grids screening (9 grids max)" onchange="checkRequired();">
                            <label class="custom-control-label" for="my_match5">Cryo-EM grids screening (9 grids max)</label>
                            <div class="invalid-feedback">Select at least a service.</div>
                        </div>

<script>
function checkRequired() {
    if ($('input[type=checkbox]:checked').length > 0) {  // the "> 0" part is unnecessary, actually
        $('input[type=checkbox]').prop('required', false);
    } else {
        $('input[type=checkbox]').prop('required', true);
    }

}


MDBootstrap staff pro premium priority commented 5 years ago

This code can not work because of 2 reasons: 1) you check if the checkboxes with state :checked existand after that you switch the imporant required prop to be false. Why? 2) you have to check the state of the checkboxes on some other event to make sure that you don't switch the state of form when you check it.

You can learn how we suggest accomplishing form validation on this docs site: https://mdbootstrap.com/docs/jquery/forms/validation/

Best Regards, Piotr


morellik answered 5 years ago

Thanks for your opinion. I don't know, but the snippet works fine. I've a group of checkbox where at least one has to be checked before submit the form. In my case if a box is checked the required is satisfied so I remove the required property from all checkbox. If no box is checked the required property is applied to all checkbox.

I started with the page you link, but there aren't example about checkbox group, there are only single checkbox validation.


Piotr Glejzer staff commented 5 years ago

I checked your snippet, it looks good but there is not enough code to work properly. Do you have more, with the form etc? Did you check this documentation https://mdbootstrap.com/docs/jquery/forms/validation/


morellik answered 5 years ago

I checked the documentation but the checkbox validation example works for only one box. I want to validate a group of checkbox where at least one of them must be selected.

My code works fine for my requirements. If you have better suggestion I'm happy to try .


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: PC
  • Browser: Chrome
  • OS: Linux
  • Provided sample code: No
  • Provided link: No