在select2中应用自定义验证

Question

I am using select2 which is working fine now. I want to validate it that its value can not be blank. I don't want to use jQuery validator plugin because there is other fields on form as well code for validation for form's other field is pre-written i am just applying select2 to every drop down. I have tried for solution on net but every answer is using jquery validator plugin.

My code is

$('.select2-use').select2({
        placeholder: "Select",
        allowClear: true
    });

<select id="type" name="type" class="form-control select2-use">
    <option value="">select type</option>
    <option value="U">User</option>
    <option value="A">Admin</option>
</select>

My current validation is

if (type == '') {
   $("#type").closest("span[class='select2-selection--single']").css('border-color','#a94442'); //which is not working
   console.log($("#type").find('span.select2-selection--single'));
   flag++;
} else {
  $('.select2-selection--single').css('border-color','');
}

How can i change the border color of select2 span in red as error.

Answer 1

Try with below code:

if (type == '') {
   $("#type").next("span.select2-container").find("span[class='select2-selection--single']").css('border-color','#a94442'); 
   console.log("match found");
   flag++;
} else {
  $("#type").next("span.select2-container").find("span[class='select2-selection--single']").css('border-color','');
}

Whenever we convert normal dropdown to select2 dropdown; then this plugin creates its own DOM structure and hides the original dropdown . So the generated DOM gets placed just next to the original dropdown . To deal with its DOM; we need to use $.next() to traverse next in DOM and then we can grab any of its child element by $.find() . Hope it will help you.

Answer 2

apply style on .select2-choice .

Following is the best way to do it.

Add the following css class:

.select2-container .select2-choice {
        border: 1px solid transparent !important;
        box-shadow: none;
        border-radius: 0;
    }
    .select2-container .select2-choice.show-error {
        border: 1px solid #EC644B !important;
    }

On error condition do this.

jQuery("#yourtargetselect2 .select2-choice").addClass("show-error");

With your code it would be

if (type == '') {
   $("#type").closest(".select2-choice").css('border-color','#a94442'); //which is not working
   flag++;
} else {
  $('.select2-choice').css('border-color','');
}