Select 2 Wicket + form validation

[Kostroun Petr]

Hi, I have form with multiple select2 components, and I need validate few of them. I tryed attribute required and some css classes, but without sucess. Can someone give me a point how to solve this issue? Bellow is code of my page:

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

 .p-0 {
 padding: 0px !important;
 height: 30px;
 }

 .was-validated .custom-select:invalid + .select2 .select2-selection{
 border-color: #dc3545!important;
 }
 .was-validated .custom-select:valid + .select2 .select2-selection{
 border-color: #28a745!important;
 }
 *:focus{
 outline:0px;
 }
 </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 custom-select" type="hidden" wicket:id="equipmentType" required/>
 </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>