How to do form validation with select2 and Wicked?

Question

I have Select2 in wicket, and I want to add form validation on it. I use atributte required, but it doesnt work. I want that select2 after unsuccessful validation have red background, or at least red border. When I try to submit form with required attribute, It dont do any validation. Select where I try to do validation is origin country. Can someone give me a point, how to achive this behaiviour? Thanks for any help.

<wicket:head xmlns:wicket="http://wicket.apache.org/">
    <style>
       /*.form-group .form-control {*/
       /*     padding: 0;*/
       /*     height: 33px;*/
       /* }*/

        .p-0 {
            padding: 0px !important;
            height: 30px;
        }
    </style>


</wicket:head>
<wicket:panel xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/">
    <div class="col-xs-12">
        <div class="col-xs-12">
            <div class="form-group">
                <div class="col-sm-3">
                    <input type="submit" value="Request" class="btn btn-danger"/>
                </div>

                <div class="col-sm-3">
                    <label for="quotationId" wicket:id="quotationIdLabel"></label>
                    <div>
                        <input wicket:id="quotationId" type="text" size="20"/>
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="product" wicket:id="productLabel"></label>
                    <div>
                        <select class="form-control" wicket:id="product"/>
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="contract" wicket:id="contractLabel"></label>
                    <div>
                        <input type="hidden" wicket:id="contract"/>
                    </div>
                </div>

                <div class="col-sm-3" style="padding: 0">
                    <label for="customer" wicket:id="customerLabel"></label>
                    <div>
                        <input class="form-control p-0" type="hidden"
                               wicket:id="customer" />
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="serviceLevel" wicket:id="serviceLevelLabel"></label>
                    <div>
                        <select class="form-control" wicket:id="serviceLevel"/>
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="equipmentType" wicket:id="equipmentTypeLabel"></label>
                    <div>
                        <input class="form-control p-0" type="hidden" wicket:id="equipmentType"/>
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="commodity" wicket:id="commodityLabel"></label>
                    <div>
                        <select class="form-control" wicket:id="commodity"/>
                    </div>
                </div>

                <span class="col-sm-3">
                    <label for="originCountry" wicket:id="originCountryLabel"></label>
                    <div>
                       <input type="hidden"  wicket:id="originCountry"  required/>
                    </div>
                </span>

                <div class="col-sm-3">
                    <label for="originDgfStation" wicket:id="originDgfStationLabel"></label>
                    <div>
                        <input type="hidden" wicket:id="originDgfStation"/>
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="destinationCountry" wicket:id="destinationCountryLabel"></label>
                    <div>
                        <input type="hidden" wicket:id="destinationCountry"/>
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="destinationDgfStation" wicket:id="destinationDgfStationLabel"></label>
                    <div>
                        <input type="hidden" wicket:id="destinationDgfStation"/>
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="shippingTerms" wicket:id="shippingTermsLabel"></label>
                    <div>
                        <select class="form-control" wicket:id="shippingTerms"/>
                    </div>
                </div>

            </div>

            <br/>
        </div>
    </div>

    <div class="clearfix"></div>

</wicket:panel>

I think you should report this to Select2 issue tracker. At its options documentation page (https://select2.org/configuration/options-api) there is no setting to make it required. — martin-g, Jun 19 '20 at 07:51

score 0 · Answer 1 · answered Jun 18 '20 at 14:42

0

I think the problem is with hidden fields which can not be declared as required in HTML. You might need to use some hack to use a regular text field and hide it with CSS. See this answer: make hidden field required

answered Jun 18 '20 at 14:42

Andrea Del Bene

2,521
1
15
20

Problem is that select2 require text fields as input style hidden. It generate divs behind scene. So I cant create hack for input style hidden. – Petr Kostroun Jun 18 '20 at 14:46

How to do form validation with select2 and Wicked?

1 Answers1