I have a form with SELECT2 into it.

Here is what the sample image:

As you can see on the image the error label is not the same as the other error labels.

There are two problems:

1. How can I fix the error label on SELECT2 to make it same with the other error labels?
2. How can I add or remove the validation when the SELECT2 changes its value? (Sorry, I am new to SELECT2)

Here is my code to validated my form:

$("#systemcodeForm").validate({
    submitHandler: function (form) {
      
  },
  rules: {
    systemtype: {
      required: true         
    }
  },
  messages: {
    systemtype: {
      required: "Please choose the system type",
    }
  },
  errorPlacement: function(label, element) {
    if(element.hasClass('web-select2') && element.next('.select2-container').length) {
      label.insertAfter(element.next('.select2-container'));
    }
    else{
      label.addClass('mt-2 text-danger');
      label.insertAfter(element);
    }
  },
  highlight: function(element) {
    $(element).parent().addClass('has-danger')
    $(element).addClass('form-control-danger')
  },
  success: function(label,element) {
    $(element).parent().removeClass('has-danger')
    $(element).removeClass('form-control-danger')
    label.remove();
  }
});

Here is my HTML code:

<form class="cmxform" id="systemrightsForm" method="post" action="#">
 <div class="row">
   <div class="col-md-12">
      <div class="form-group">
        <label class="control-label">System Type</label>
        <select id="systemtype" name="systemtype" class="web-select2 form-control" data-width="100%">
            <option value="">-- SELECT SYSTEM TYPE --</option>
            <option value="1">Option 1</option>
        </select>
      </div>
    </div>
</div>
<div class="row">
   <div class="col-md-12">
    <div class="form-group">
      <label class="control-label" for="systemcode">System Code</label>
      <input type="text" class="form-control" id="systemcode" name="systemcode" placeholder="Enter system code" autoplete="off" maxlength="15">
     </div>
   </div>
</div>
<div class="row">
  <div class="col-md-12">
   <div class="form-group">
     <label class="control-label" for="systemdesc">Description</label>
        <input type="text" class="form-control" id="systemdesc" name="systemdesc" placeholder="Enter system description" autoplete="off" maxlength="40">
    </div>
  </div>
</div>
</form>

I have a form with SELECT2 into it.

Here is what the sample image:

As you can see on the image the error label is not the same as the other error labels.

There are two problems:

1. How can I fix the error label on SELECT2 to make it same with the other error labels?
2. How can I add or remove the validation when the SELECT2 changes its value? (Sorry, I am new to SELECT2)

Here is my code to validated my form:

$("#systemcodeForm").validate({
    submitHandler: function (form) {
      
  },
  rules: {
    systemtype: {
      required: true         
    }
  },
  messages: {
    systemtype: {
      required: "Please choose the system type",
    }
  },
  errorPlacement: function(label, element) {
    if(element.hasClass('web-select2') && element.next('.select2-container').length) {
      label.insertAfter(element.next('.select2-container'));
    }
    else{
      label.addClass('mt-2 text-danger');
      label.insertAfter(element);
    }
  },
  highlight: function(element) {
    $(element).parent().addClass('has-danger')
    $(element).addClass('form-control-danger')
  },
  success: function(label,element) {
    $(element).parent().removeClass('has-danger')
    $(element).removeClass('form-control-danger')
    label.remove();
  }
});

Here is my HTML code:

<form class="cmxform" id="systemrightsForm" method="post" action="#">
 <div class="row">
   <div class="col-md-12">
      <div class="form-group">
        <label class="control-label">System Type</label>
        <select id="systemtype" name="systemtype" class="web-select2 form-control" data-width="100%">
            <option value="">-- SELECT SYSTEM TYPE --</option>
            <option value="1">Option 1</option>
        </select>
      </div>
    </div>
</div>
<div class="row">
   <div class="col-md-12">
    <div class="form-group">
      <label class="control-label" for="systemcode">System Code</label>
      <input type="text" class="form-control" id="systemcode" name="systemcode" placeholder="Enter system code" autoplete="off" maxlength="15">
     </div>
   </div>
</div>
<div class="row">
  <div class="col-md-12">
   <div class="form-group">
     <label class="control-label" for="systemdesc">Description</label>
        <input type="text" class="form-control" id="systemdesc" name="systemdesc" placeholder="Enter system description" autoplete="off" maxlength="40">
    </div>
  </div>
</div>
</form>

• javascript
• jquery
• jquery-validate
• jquery-select2

• Can you add plete HTML relevant to that image please ? – Always Helping Commented Sep 17, 2020 at 2:16
• @AlwaysHelping Please see my updated question – Maricris Commented Sep 17, 2020 at 2:20
• @AlwaysHelping I have solved number 1. The only problem is how to remove the validation when select2 changes its value – Maricris Commented Sep 17, 2020 at 2:36
• No problem i have added solution to both now. All working. – Always Helping Commented Sep 17, 2020 at 2:43
• Glad to help - Happy coding :) – Always Helping Commented Sep 17, 2020 at 2:46

1 Answer 1

You can simply use native select2 change function to watch for a change on your select option selection.

As you are using jQuery .validate to validate the select input so by default .validate will not hide the label after option is selected.

In order to get the correct label we need to use a global variable to store the label element and then remove that label on selection of an option.

Live Working Demo: (both question solved)

var mySelect2 = $('#systemtype')

//initiate select
mySelect2.select2();

//global var for select 2 label
var select2label

$("#systemrightsForm").validate({

  rules: {
    systemtype: {
      required: true
    },
    systemcode: {
      required: true
    },
    systemdesc: {
      required: true
    }
  },
  messages: {
    systemtype: {
      required: "Please choose the system type",
    },

  },
  errorPlacement: function(label, element) {
    if (element.hasClass('web-select2')) {
      label.insertAfter(element.next('.select2-container')).addClass('mt-2 text-danger');
      select2label = label
    } else {
      label.addClass('mt-2 text-danger');
      label.insertAfter(element);
    }
  },
  highlight: function(element) {
    $(element).parent().addClass('is-invalid')
    $(element).addClass('form-control-danger')
  },
  success: function(label, element) {
    $(element).parent().removeClass('is-invalid')
    $(element).removeClass('form-control-danger')
    label.remove();
  },
  submitHandler: function(form) {

  },
});

//watch the change on select
mySelect2.on("change", function(e) {
  select2label.remove(); //remove label
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="https://ajax.aspnetcdn./ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.5.2/css/bootstrap.min.css">

<form class="cmxform" id="systemrightsForm">
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label class="control-label">System Type</label>
        <select id="systemtype" name="systemtype" class="web-select2 form-control" data-width="100%">
          <option value="">-- SELECT SYSTEM TYPE --</option>
          <option value="1">Option 1</option>
        </select>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label class="control-label" for="systemcode">System Code</label>
        <input type="text" class="form-control" id="systemcode" name="systemcode" placeholder="Enter system code" autoplete="off" maxlength="15">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label class="control-label" for="systemdesc">Description</label>
        <input type="text" class="form-control" id="systemdesc" name="systemdesc" placeholder="Enter system description" autoplete="off" maxlength="40">
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>

</form>