Is there a way to dynamically change select2 styling using code when a form is submitted?

Question

Is there a way to dynamically change select2 styling using code when a form is submitted?

Having trouble highlighting empty select2 selects when a form is submitted? I'm struggling to override my existing CSS styling upon document load.

Check out my jQuery attempt:

var $requiredUnfilledItems = $(".required:not(.filled)");
if ($requiredUnfilledItems.length > 0) {
  $requiredUnfilledItems.each( function(){
    $(this).addClass('warning-border');
  });
}

Here's the CSS for .warning-border:

.warning-border { 
    outline: none !important;
    border-color: red !important;
    box-shadow: 0 0 10px red !important;
}

It's supposed to override this:

.select2-container--default .select2-selection--single {
    width: 100%;
    padding-left: 4px;
    height: 100%;
    border: thin solid lightgray;
    height: 30px;
}

But it's not working. I've also attempted this, which may just show that I still have some CSS learning to do:

.warning-border, .select2-container.warning-border { 
    outline: none !important;
    border-color: red !important;
    box-shadow: 0 0 10px red !important;
}

Any help would be greatly appreciated!

jquery css css-selectors jquery-select2

Answer 1

Answer №1

It's best to avoid using !important in your CSS and instead understand how cascading works. There are plenty of helpful resources online that can explain this concept better than I can--

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

In the example code snippet provided, a JQuery handler has been implemented so that a text input field detects when it is filled and adds or removes a "filled" class accordingly onkeyup event. Consider adding a similar handler if one is not already present in your codebase (though chances are you might have one already).

The CSS has been modified to ensure that certain class combinations do not highlight in red (located at the bottom of the stylesheet in the snippet).

An adjustment was made from using border-color to shorthand properties in the CSS to guarantee consistency across affected properties. If there were any issues with how it functioned previously, this change should address them.

$( "input[type=text]" ).keyup(function() {
  if(this.value != '') $(this).addClass('filled');
  else
    $(this).removeClass('filled')
});

$("form").submit(function(){
  var $requiredUnfilledItems = $('.required:not(.filled)'); 
  if ($requiredUnfilledItems.length > 0) 
  {$requiredUnfilledItems.each( function(){$(this).addClass('warning-border');
   });
  }
  else { alert("You entered in " + this.name.value); }
  return false;})

.warning-border { 
    outline: none !important;
    border: thin solid red;
    box-shadow: 0 0 10px red;
}

.warning-border, .select2-container.warning-border { 
    outline: none !important;
    border: thin solid red;
    box-shadow: 0 0 10px red;
}

.warning-border.filled, .select2-container--default .select2-selection--single {
    width: 100%;
    padding-left: 4px;
    height: 100%;
    border: thin solid lightgray;
    height: 30px;
    box-shadow: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" onsubmit="">
<input id="name" type="text" class="required filled" value="Name"/>
<input type="submit">
</form>

Answer 2

It's best to avoid using !important in your CSS and instead understand how cascading works. There are plenty of helpful resources online that can explain this concept better than I can--

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

In the example code snippet provided, a JQuery handler has been implemented so that a text input field detects when it is filled and adds or removes a "filled" class accordingly onkeyup event. Consider adding a similar handler if one is not already present in your codebase (though chances are you might have one already).

The CSS has been modified to ensure that certain class combinations do not highlight in red (located at the bottom of the stylesheet in the snippet).

An adjustment was made from using border-color to shorthand properties in the CSS to guarantee consistency across affected properties. If there were any issues with how it functioned previously, this change should address them.

$( "input[type=text]" ).keyup(function() {
  if(this.value != '') $(this).addClass('filled');
  else
    $(this).removeClass('filled')
});

$("form").submit(function(){
  var $requiredUnfilledItems = $('.required:not(.filled)'); 
  if ($requiredUnfilledItems.length > 0) 
  {$requiredUnfilledItems.each( function(){$(this).addClass('warning-border');
   });
  }
  else { alert("You entered in " + this.name.value); }
  return false;})

.warning-border { 
    outline: none !important;
    border: thin solid red;
    box-shadow: 0 0 10px red;
}

.warning-border, .select2-container.warning-border { 
    outline: none !important;
    border: thin solid red;
    box-shadow: 0 0 10px red;
}

.warning-border.filled, .select2-container--default .select2-selection--single {
    width: 100%;
    padding-left: 4px;
    height: 100%;
    border: thin solid lightgray;
    height: 30px;
    box-shadow: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" onsubmit="">
<input id="name" type="text" class="required filled" value="Name"/>
<input type="submit">
</form>

Is there a way to dynamically change select2 styling using code when a form is submitted?

Answer №1

Similar questions

A possible substitute for the "background-size" CSS attribute

Employ jQuery to send data to a php script

Triggering an event in Angular 2 after ngFor loop completes

Error: ajax is not defined and needs to be declared (repeated twice)

How can I access multiple icons using jQuery?

The hover selector in Material UI and React is not functioning as expected

Utilizing jQuery to target a specific element by its ID within a function parameter

I'm noticing that my style.css changes are only showing up after a hard refresh, but then they revert back to an older version when I refresh normally

JQuery Ajax: Issue with updating Total Likes for posts when Like button is clicked

Loop through the list items in jQuery to display the total number of items

Is it possible to select an input field while using jQuery animate?

Is there a way to only load an external script once during a specific event on a webpage that uses all ajax?

Video not visible in program (CSS, EXPRESS)

Show side by side using javascript

Is there a way for me to determine if a user has engaged with a form?

Tips on extracting the value from the chosen option in 2 separate rows with identical IDs

Adjust transparency in Bootstrap slider with picture indicator

Utilizing Hyperlinks in jQuery DataTables Cell with Data Pulled from Mysql Table

Site Having Trouble Displaying Image

What could be causing the lack of functionality for my button click in my JavaScript and HTML setup?