bootstrap-validator icon indicating copy to clipboard operation
bootstrap-validator copied to clipboard

Custom validation doen't add has-error class on Select2

Open array81 opened this issue 5 years ago • 1 comments

I have create a custom validation to check if the user have select one or more items on select2 field with multiselect option, if user didn't have select nothing the validation is not pass. I have 2 problems:

  1. custom function is call only when I call validator('validate') but not when select2 is unfocus;
  2. when call validator('validate') custom function is call but the class "has-error" is not added to form group so the form is submit.

My JS code:

$('#saveinvoice').validator({	    
	custom: {
		'customers': function($el) { 
			if ($el.select2('data').length==0) {
				return "Select one or more customers!";
			}
		}
	
	}
});

function submitInvoiceData(){ 
	if ($('#saveinvoice').validator('validate').has('.has-error').length == 0) {
		...
		document.getElementById('saveinvoice').submit();
	};
}

My HTML code:

			  <div class="col-md-6">
				<div class="form-group">
				  <label for="Contacts">Contacts</label>
				  <select class="form-control select2" id="Contacts" name="Contacts" multiple="multiple" data-placeholder="" style="width: 100%;" value="2" data-customers="true" required>
					 <option value="1">AAAA</option>
					 <option value="2">BBBB</option>
					 <option value="3">CCCC</option>
				  </select>
				</div>
			  </div>

array81 avatar Mar 07 '19 14:03 array81

a workaround:

$(document).on("invalid.bs.validator","form",function(e){
        $(".select2-hidden-accessible").trigger("change");
});

aalyusuf avatar Mar 20 '19 06:03 aalyusuf