1

Hi I am trying to select only the fields who's CSS property is not Display: "None". Please have a look at the code and please let me know what an I doing wrong?

function (controlId) { var returnValidFlag = true;

        //var requiredClass = $this.find('.required');
        //console.log(requiredClass);

        $('.required:not([display=none])').each(function () {
            // Get 'this' HTML object's ID
            var thisInputID = $(this).attr('id');

            // Get 'this' error message 
            var thisErrorMessageID = thisInputID + 'ErrorMessage';
            // console.log('Error ID: ' + thisErrorMessageID);

            // Get the user input value
            var thisInputValue = $(this).val();
            console.log('Input ID: ' + thisInputValue + " " + thisErrorMessageID);

            if (thisInputValue =='') {
                returnValidFlag = false;
                $('#' + thisErrorMessageID).show();
            } else {
                returnValidFlag = true;
                $('#' + thisErrorMessageID).hide();
            }
        });

        return returnValidFlag;
    }
Sarbraj Dulai
  • 180
  • 10
  • Possible duplicate of [Using jQuery, how do you find only visible elements and leave hidden elements alone?](https://stackoverflow.com/questions/16782925/using-jquery-how-do-you-find-only-visible-elements-and-leave-hidden-elements-al) – But those new buttons though.. Nov 26 '18 at 00:28

2 Answers2

1

You can use :visible selector.

display is not part of an element's attributes , it is a style property

$('.required:visible)').each(...
charlietfl
  • 170,828
  • 13
  • 121
  • 150
0

In jQuery, you can use filter.

$('div').filter((index, node) => $(node).css('display') !== 'none')
user44
  • 682
  • 7
  • 20