-2

This filters all the input fields in HTML:

var required = $('input, textarea, select').filter('[required]:visible')

I want to filter in a particular div:

<div id="a">
  <input ... required>
</div>
<div id="b">
  <input ... required>
  <input ... required>
</div>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
smj
  • 416
  • 1
  • 4
  • 10
  • 3
    `$('#a').find('input,textarea,select').filter(....)` – Sysix Feb 17 '19 at 12:17
  • find doesn't work on some IE – smj Feb 17 '19 at 12:28
  • "find doesn't work on some IE" please clarify that statement as it seems difficult to prove without a lot more context here such as version of browsers and the jQuery you are using etc. – Mark Schultheiss Feb 17 '19 at 13:03
  • 1
    `find doesn't work on some IE` that's not true at all - unless you're going back to IE5 or 6, in which case you have much bigger issues. – Rory McCrossan Feb 17 '19 at 13:04
  • Please update your question to put up proper HTML and whatever other code you need to provide a reproducible example. As it stands, this is just a copy of the accepted answer here: https://stackoverflow.com/questions/18659726/jquery-find-all-the-visible-required-fields with a statement that it does not work. We need your actual markup and any other code to prove otherwise. – Mark Schultheiss Feb 17 '19 at 13:10
  • Be cognizant of "hidden" vs not visible https://stackoverflow.com/q/17425543/125981 – Mark Schultheiss Feb 17 '19 at 13:29
  • Please edit your question to add clarity. 1. How you set visible/not visible 2. proper input tags `` is not a proper tag with the `...` in there. 3. Add clarification of "I want to filter in a particular div:" - do you mean just those two, both of those, ability to choose which one, or something else? 4. You have `select` and `textarea` in your selector by none in your example html; are there some of those in the actual markup?. 5. If you have a browser specific issue (IE) please note that specific and the jQuery version being used. – Mark Schultheiss Feb 17 '19 at 13:59
  • @Sysix this worked even on IE – smj Feb 18 '19 at 06:29

1 Answers1

1

You can simply use the following selector, which makes use of :input (which will also select <button>s, you can switch back to input,textarea,select and filter if that's not desired):

$('#a :input:visible[required]');

Replace #a with whatever div you want to filter on.

If the elements need to be right under the div, you can use #a > :input:visible[required] instead.

Demo:

var $required = $('#a :input:visible[required]');

// Just to showcase what this selector matches
$required.css('background-color', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">
  <p>A1: <input type="text" required></p>
  <p>A2: <textarea required></textarea></p>
  <p>A3: <select required><option>option1</option></select></p>
  <p>A4 (hidden, won't be matched): <input type="text" style="display:none" required></p>
</div>
<div id="b">
  <p>B1: <input type="text" required></p>
  <p>B2: <input type="text" required></p>
</div>
Jeto
  • 14,596
  • 2
  • 32
  • 46
  • Switching back as you have it noted will still select the buttons in the original context prior to the filter. – Mark Schultheiss Feb 17 '19 at 13:47
  • @MarkSchultheiss Not exactly sure what you mean, but yes, you'd have to keep using `.filter()` then, unless you want to repeat `:visible[required]` for each element name (which would be ugly). – Jeto Feb 17 '19 at 13:55
  • `` and `` both are selected as `$(':input')` and `$('input')` but as you noted `$(':input')` also includes the `` so either way you would have to filter out something perhaps...`.not('[type="submit"],[type="button"], button')` – Mark Schultheiss Feb 17 '19 at 14:43
  • Perhaps also type `reset` but I think you already know all this, mainly posting for others. – Mark Schultheiss Feb 17 '19 at 14:50
  • Sure, depends on what he wants to target exactly. Thanks for the comments. – Jeto Feb 17 '19 at 15:05
  • @SyedMohammedSMJ You're welcome. You should also mark the answer as accepted (the little “✓” on the left) if it solves your issue. – Jeto Feb 18 '19 at 07:34
  • Please add `$('#a').find('input,textarea,select').filter(` as this form is preferred when a large DOM is in play due to the right to left selector of the sizzle engine - isolate to the context `$('#a')` first, then the selectors within that context. Notes here re: context https://stackoverflow.com/q/16422478/125981 – Mark Schultheiss Feb 19 '19 at 16:27
  • @MarkSchultheiss Very interesting post, thanks for sharing! I'm really surprised that jQuery wouldn't optimize the descendant selector though, by simulating a `find` operation (basically, find the parent then its child, instead of all children then filter by their parent). What about `$('input,textarea,select', '#a')` (or `$('input,textarea,select', $('#a'))`), performance wise? – Jeto Feb 19 '19 at 16:52
  • It is how CSS selectors work, both those give the context with the latter matching the documentation. – Mark Schultheiss Feb 19 '19 at 18:37