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

  2460 Points

  1028 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

  Please remember to "Mark as Answer" if suggestion helps.
• • 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

  Member

  670 Points

  446 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.
  
• • Reply
  Yuki Tao

  Contributor

  2460 Points

  1028 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

  Please remember to "Mark as Answer" if suggestion helps.