Validation issue

[537mfb]

I've done the following test:

I created a multiselect in a form with another input both marked with required, loaded the page and used the bowser's dev tools to disable the display:none line from the original select - this makes me be able to see both the original select and the multiselect generated by bootstrap-multiselect

1 -- if i click the submit button at this point the original select shows a red border and balloon with warning as expected.

2 - if i use the bootstrap-multiselect to select a few items, they show up in the original select as selected, but it's still marked as invalid, even if I click the submit button - the original select isn't updating it's valid status - odd behaviour that can cause issues (see point 4 below)

3 - if use the original select to add/remove items, the original select's invalid status is cleared, but bootstrap-multiselect doesn't update

4 - if i select an item in the original select, then select the same item in the bootstrap-multiselect and finally deselect it in bootstrap-multiselect, the original select is empty but clicking the submit button submits the form even though the select was marked required and is empty - this is bad behaviour

5 - reloading the page to start fresh, select anything using the bootstrap-multiselect then click to submit - the other input should fire a validation error. Now unselect all using the bootstrap-multiselect and input something into the other input - clicking submit will submit with an empty select even though the select was marked required and is empty - again this is bad behaviour

[davidstutz]

Related: #556.

[davidstutz]

From #556: http://jsfiddle.net/hb0q42sz/1/

[dtelaroli]

+1

For me, the validation it's been displayed on top left on Firefox. Chrome nothing.

[davidstutz]

For me Chrome 51.0.2704.103 m works as expected, try the example in the documentation. IE 11.0.9606.18376 does not work. Firefox 44.0.2 works. Opera 38.0 works.

[sahilchopra]

+1

[HolyExecutor]

I am using custom validation messages by using the HTML method setCustomValidity and this was triggering the same effect as described on issue #766. I was also using the oninput method on the select tag to reset the custom message to empty on user input, therefore disabling the message until it is triggered again by not selecting anything on the multi-selector.

To be able to reset the custom message on user input I used the onChange method the plugin provides. If anyone is using custom messages this way you may come upon this ticket/issue and find a solution.

$('.multi_symptoms').multiselect({
    enableFiltering: true,
    allSelectedText: false,
    numberDisplayed: 0,
    buttonClass: 'btn btn-default form-control',
    onChange: function(option, checked, select) {
        this.$select[0].setCustomValidity('');
    }
});

[tiesont]

@HolyExecutor Github-flavored Markdown uses three back-ticks (```) to create code fences. Just FYI, if you want to fix the rendering on your example.

[HolyExecutor]

@HolyExecutor Github-flavored Markdown uses three back-ticks (```) to create code fences. Just FYI, if you want to fix the rendering on your example.

Thank you for the tip @tiesont . I fixed the code fence and now it is more legible.

[cristianofmc]

I tested the site example and it doesn't work

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<!--multi select-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-post-checkboxName').multiselect({
            checkboxName: function(option) {
                var $optgroup = $(option).closest('optgroup');
                if ($optgroup.id == 'example-post-checkboxName-1') {
                    return 'group1[]';
                }
                else {
                    return 'group2[]';
                }
            }
        });
    });
</script>
<form class="form-horizontal" method="POST" action="post.php">
    <div class="form-group">
        <label class="col-sm-2 control-label">Multiselect</label>
        <div class="col-sm-10">
            <select id="example-post-checkboxName" name="multiselect[]" multiple="multiple" required>
                <optgroup label="Group 1" id="example-post-checkboxName-1">
                    <option value="1-1">Option 1.1</option>
                    <option value="1-2">Option 1.2</option>
                    <option value="1-3">Option 1.3</option>
                </optgroup>
                <optgroup label="Group 1" id="example-post-checkboxName-2">
                    <option value="2-1">Option 2.1</option>
                    <option value="2-2">Option 2.2</option>
                    <option value="2-3">Option 2.3</option>
                </optgroup>
            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
</form>

[dtelaroli]

5 years my friend. Take care with this repo, it is abandoned.