从节点内访问具有 ID 的多个元素，但也具有特定的 class

Question

I need to retrieve all elements who's ID ends with "_inputError" from within a specific element , AND also , I need to retrieve only the inputError that has class 'b-block' set.. How would I do this using javascript/jquery?

I know I can get my form node with: var formNode = $("#frm1");

I know I can get ALL elements with ID ending, but this will get them all, which isn't quite what I need: var inputErrors = $("[id$=_inputError]"); .

How do I mix'em all together as to retrieve only the input errors with 'd-block' class from within a specified form node?

Cheers!

UPDATE: This seems to work for me:

var inputErrors = $("[id$=_inputError].d-block");
console.warn(inputErrors[0]);

It'll retrieve all inputError with class.d-block. However, I've yet to find how to do this check ONLY from a selected form element id, instead of the hole page. (I can have multiple forms on a single page!)

Answer 1

I need to retrieve all elements who's ID ends with "_inputError" from within a specific element , AND also , I need to retrieve only the inputError that has class 'b-block' set.. How would I do this using javascript/jquery?

I know I can get my form node with: var formNode = $("#frm1");

I know I can get ALL elements with ID ending, but this will get them all, which isn't quite what I need: var inputErrors = $("[id$=_inputError]"); .

How do I mix'em all together as to retrieve only the input errors with 'd-block' class from within a specified form node?

Cheers!

UPDATE: This seems to work for me:

var inputErrors = $("[id$=_inputError].d-block");
console.warn(inputErrors[0]);

It'll retrieve all inputError with class.d-block. However, I've yet to find how to do this check ONLY from a selected form element id, instead of the hole page. (I can have multiple forms on a single page!)

Answer 2

To help others if it can, here's the final solution and why I needed this:

Essentially, I get a response back from an ajax post like so:

{
  type: 2,
  formid: 'frmProfile',
  fields: {
    username: "Invalid username!", 
    email: "Invalid email!"
  }
}

I loop my response.fields to show the individual errors under each failed inputs.

I then needed to find a way set focus on the first failed input, Because my fields are NOT 0-indexed based, I could not simply set the focus on the first field in the array! They are 'randomly' looped through!

Therefor, I decided to get all input errors that we're showing (id=*_inputError and with class d-block). The first one in the returned array is in fact the first input error, So: I use its ID to determine the corresponding input name and set focus to it:

var inputErrors = $("#" + response.formid + " [id$=_inputError].d-block");
var firstInputError = inputErrors[0].id.replace(/_inputError$/, ''); // get just the name of the failed input! Its name/id should be the same as <name>_inputError!

document.getElementById(firstInputError).focus();

This seems to do the trick for me;) Hopefully, this can serve ideas to others.

Thanks for your help folks! P