Selectpicker validator forcing user to select a value

Viewed 481

I am currently developing a web application using ASP.NET Core v2.2.

I'm having troubles in one of my forms where I have several "multiselect" (using bootstrap-select selectpicker). The problem is that the form doesn't allow users to not select any options in a multiselect before being submitted.

Here's an example of one of my multiselects that I'd like to be "optional" :

 <form asp-controller="Home" asp-action="Index" method="post" role="form" id="bsForm">
       <div class="row row-mb-2">
          <div class="col col-sm-4">
              <label class="col-form-label" style="float:left">Product :</label>
          </div>
          <div class="col">
              <select asp-for="product.ProductId"
                      class="form-control selectpicker" multiple data-live-search="true"
                      style="display: initial !important"
                      asp-items="@(new SelectList(ViewBag.ListOfProducts,"ProductId","ProductName"))">
                      <option data-hidden="true"></option>
              </select>
          </div>
      </div>
      <div class="row">
          <input type="submit" value="Submit" class="btn btn-primary" style="width:25%" />
      </div>    
</form>


<script type="text/javascript">
    $(document).ready(function () {
        $('.selectpicker').selectpicker();
    });
</script>

When I'm looking into it (by inspecting the element), it looks like there is some kind of validator running and forbidding users to let these selectpickers not selected.

enter image description here

If you have any idea of how to disable this validator (or just the fact of forcing users to select a value), I would be grateful.

Thanks in advance !

Edit :

So I've found something that does the trick. I think that by doing so I removed every existing validations conditions. Here's what I did :

<script type="text/javascript">
   $(document).ready(function () {
      $('#bsForm').validate({
            rules: {
            }
      });
   });
</script>

Since this is kind of a butchering solution, I'm still looking for a better solution.

0 Answers
Related