Not able to apply css | Required Field validation for Select2 multi select [Answered]RSS

• • Reply
  varun3101

  Member

  1 Points

  2 Posts

  Not able to apply css | Required Field validation for Select2 multi select

  Mar 01, 2019 07:41 AM|varun3101|LINK

  hi all

  I am using select2 multi select in my MVC application. Its working absolutely fine. But the usual behavior of required attribute is not working for select2 inputs.

  <select id="FamiliesSelect" class="col-xl-10 js-example-basic-multiple" asp-items="@(new SelectList(some items))" required multiple>
  </select>

  when the FamiliesSelect input is empty, it is not allowing form submit but does not applying css 'input-validation-error'.

  Please help. Thanks

• • Reply
  Yuki Tao

  Contributor

  3670 Points

  1431 Posts

  Re: Not able to apply css | Required Field validation for Select2 multi select

  Mar 01, 2019 09:59 AM|Yuki Tao|LINK

  Hi varun3101,

  varun3101

  when the FamiliesSelect input is empty, it is not allowing form submit but does not applying css 'input-validation-error'.

  I make a simple demo,you could refer to:

  <style>
    
     .myErrorClass {
          color: red;
          font-size: 11px;
          /*    font-style: italic;*/
          display: block;
      }
  </style>
  
  
  <form id="frm">
      <h1>Sample form</h1>
  
      <br />
      <div>
          <label for="lstColors" class="bold block">Favorite Colors:</label>
          <select name="lstColors" id="lstColors" size="1" multiple="multiple" class="required">
              <option value="R">Red</option>
              <option value="W">White</option>
              <option value="B">Blue</option>
          </select>
      </div>
      <br />
      <br />
      <input type="submit" value="Submit" />
  </form>
  
  @section scripts{
      <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
      <script>
  
  
          $(document).ready(function () {
  
              //Transforms the listbox visually into a Select2.
              $("#lstColors").select2({
                  placeholder: "Select a Color",
                  width: "200px"
              });
  
              //Initialize the validation object which will be called on form submit.
              $("#frm").validate({
                  onkeyup: false,
                  errorClass: "myErrorClass",
  
                  //put error message behind each form element
                  errorPlacement: function (error, element) {
                      var elem = $(element);
                      error.insertAfter(element);
                  }
  
  
              });
  
  
          });
      </script>
  }

  How my demo works:

  

  More details,you could refer to this link:

  http://jsfiddle.net/chadkuehn/D7K6U/

  Best Regards.

  Yuki Tao

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
  
• • Reply
  varun3101

  Member

  1 Points

  2 Posts

  Re: Not able to apply css | Required Field validation for Select2 multi select

  Mar 01, 2019 12:18 PM|varun3101|LINK

  Thanks Yuki for your reply. Actually i want to make border of select box red. As jquery required is working for other html elements. I want to have same behavior for select box as well.

• • Reply
  yogyogi

  Participant

  1090 Points

  804 Posts

  Re: Not able to apply css | Required Field validation for Select2 multi select

  Mar 01, 2019 03:45 PM|yogyogi|LINK

  Select2 is just a normal select control with multiple property. You can bind it with Model just like a normal select control and do the validations using Data Annotations.

  A similar question is answers in the forum which might solve your problem to - 

  Model Binding and SelectList

  Helping you always. Don't forget to click "Mark as Answer" on the post that helped you.
  ♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
• • Reply
  Yuki Tao

  Contributor

  3670 Points

  1431 Posts

  Re: Not able to apply css | Required Field validation for Select2 multi select

  Mar 04, 2019 02:12 AM|Yuki Tao|LINK

  Hi varun3101,

  varun3101

  Thanks Yuki for your reply. Actually i want to make border of select box red. As jquery required is working for other html elements. I want to have same behavior for select box as well.

  If you would like to make border of select box red,you could refer to the my demo I provided before.

  You could add the code like below:

    var validobj = $("#frm").validate({
          onkeyup: false,
          errorClass: "myErrorClass",
  
        
          //When there is an error normally you just add the class to the element.
          // But in the case of select2s you must add it to a UL to make it visible.
          // The select element, which would otherwise get the class, is hidden from
          // view.
          highlight: function (element, errorClass, validClass) {
              var elem = $(element);
              if (elem.hasClass("select2-offscreen")) {
                  $("#s2id_" + elem.attr("id") + " ul").addClass(errorClass);
              } else {
                  elem.addClass(errorClass);
              }
          }
  
  
      });

  css:

   ul.myErrorClass {
      border-width: 1px !important;
      border-style: solid !important;
      border-color: #cc0000 !important;
  
  }
  

  How it works:

  

  Best Regards.

  Yuki Tao

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.