jQuery: check if element has specific style (not inline)

Question

Is it possible to check via jQuery or vanilla JS if an element has a specific style?

In my case I want to check if any input-fields on the page have a red border — applied via an external CSS-File. No inline-css and no style -attr is available, styling is completely external.

For my initial testing I got the following code from this StackOverflow-Answer: https://stackoverflow.com/a/29659187

$('.formValidation input[type=submit]').on('click',function(e){
  e.preventDefault();
  var res = $('.formValidation input[type=text],.formValidation input[type=email],.formValidation input[type=url],.formValidation input[type=password]').toArray().some(function(el){
    return $(el).css('border-color') === 'rgb(255,0,0)'
  });
  if (res) {
    console.log('Still at least one field to go!');
  } else {
    console.log('You can submit!');
  }
});

… but .css seams to only test inlineStyles.

Update I can't change HTML, the markup has to stay «as is». The red border is coming through css only. Like this: https://jsfiddle.net/z3t6k04s/

Answer 1

You could use

Window.getComputedStyle()

The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.

Example:

 var inp = document.getElementsByTagName('input')[0]; var style = window.getComputedStyle(inp, null); console.log(style.getPropertyValue("border-color")) 

 input[type='text'] { border: 1px solid rgb(255, 0, 0); } 

 <input type="text" value="Foo" /> 

Answer 2

Try it like this:

 $('.formValidation input[type=submit]').on('click',function(e){
        // Prevent Default Form Submit
         e.preventDefault();

        // Define Global if Invalid Fields Exist
        var hasInvalidInputs = false;

        // Run Through all to check Input Fields
        $('input').filter(function(index){

          // Check if Invalid Inputs already got detected. If not - check if this field is red
          if( !hasInvalidInputs )
            hasInvalidInputs = $(this).css('border-color') == 'rgb(161, 0, 0)';     // If field is red -> update global var to true
          });

        // Check if Invalid Fields are set to true
        if (hasInvalidInputs) {
          console.log('Still at least one field to go!');
        } else {
          console.log('You can submit!');
        }
    });

Answer 3

Create a one class which has a red color like

.red-color{
 border-color:red;
}

$('.formValidation input[type=submit]').on('click',function(e){
  e.preventDefault();
  var res = $('.formValidation input[type=text],.formValidation input[type=email],.formValidation input[type=url],.formValidation input[type=password]').toArray().some(function(el){
    return $(el).hasClass('red-color');
  });
  if (res) {
    console.log('Still at least one field to go!');
  } else {
    console.log('You can submit!');
  }
});

I hope this will helpful to you.

Answer 4

You can use below code

$('.formValidation input[type=submit]').on('click',function(e){
  e.preventDefault();

var isValid;
$("input").each(function() {
   var element = $(this);
   if (element.val() == "") {
       isValid = false;
     element.css('border-color','red');
   }else{
isValid = true;
     element.css('border-color','');
}
});
  if (isValid==false) {
    console.log('Still at least one field to go!');
  } else {
    console.log('You can submit!');
  }
});