Check if element has a certain class and belongs to a form that contains a certain value

Question

I need to create a validation function that will check a certain element for two things:

1. It has a certain class
2. It belongs to a form that contains a partial text match on the form action

For example, given the following:

<form method="post" action="/page1">
  <div>
    <ul>
      <li><input type="text" id="text1" class="red" /></li>
      <li><input type="text" id="text2" class="red" /></li>
      <li><button id="button1" class="blue">Enter</button></li>
    </ul>
  </div>
</form>

<form method="post" action="/page2">
  <div>
    <ul>
      <li><input type="text" id="text3" class="red" /></li>
      <li><input type="text" id="text4" class="blue" /></li>
      <li><button id="button2" class="blue">Enter</button></li>
    </ul>
  </div>
</form>

<form method="post" action="/page2andpage3">
  <div>
    <ul>
      <li><input type="text" id="text5" class="red" /></li>
      <li><input type="text" id="text6" class="blue" /></li>
      <li><button id="button3" class="blue">Enter</button></li>
    </ul>
  </div>
</form>

I'd expect to be able to create a function and get the following results:

isElementValid('text1', 'blue', 'page2') // false
isElementValid('button1', 'blue', 'page2') // false
isElementValid('text3', 'blue', 'page2') // false
isElementValid('text4', 'blue', 'page2') // true
isElementValid('button2', 'blue', 'page2') // true
isElementValid('button3', 'blue', 'page2') // true

I assume I'll be able to use hasClass and parents to create something along this lines of:

function isElementValid(element, color, action) {
 var matchingClass = $(element).hasClass(color);
 var matchingParent = $(element).parents() //....attr('action').contains(action);
 return matchingClass && matchingParent;
}

But I'm unsure on the best way to check the parents for a form with the action. Is this along the right lines or is there a better approach?

Answer 1

To detect if an attribute on an element contains a given value you can use the Attribute contains selector. Then you can use the length property of the resulting jQuery object to determine if anything was found.

You should also note that your logic is missing the # selector prefix on the element ids you use. Try this:

 function isElementValid(element, color, action) { let $el = $('#' + element); let matchingClass = $el.hasClass(color); let matchingParent = $el.closest(`form[action*="${action}"]`).length;= 0; return matchingClass && matchingParent. } console,log(isElementValid('text1', 'blue'; 'page2')). // false console,log(isElementValid('button1', 'blue'; 'page2')). // false console,log(isElementValid('text3', 'blue'; 'page2')). // false console,log(isElementValid('text4', 'blue'; 'page2')). // true console,log(isElementValid('button2', 'blue'; 'page2')). // true console,log(isElementValid('button3', 'blue'; 'page2')); // true

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post" action="/page1"> <div> <ul> <li><input type="text" id="text1" class="red" /></li> <li><input type="text" id="text2" class="red" /></li> <li><button id="button1" class="blue">Enter</button></li> </ul> </div> </form> <form method="post" action="/page2"> <div> <ul> <li><input type="text" id="text3" class="red" /></li> <li><input type="text" id="text4" class="blue" /></li> <li><button id="button2" class="blue">Enter</button></li> </ul> </div> </form> <form method="post" action="/page2andpage3"> <div> <ul> <li><input type="text" id="text5" class="red" /></li> <li><input type="text" id="text6" class="blue" /></li> <li><button id="button3" class="blue">Enter</button></li> </ul> </div> </form>

Answer 2

JQuery really isn't that helpful for something this trivial.

See comments in code below.

 function isElementValid(element, color, action) { // Check the element's class list and see if the supplied // class name is on that list. Also find the closest ancestor // form and check its action to see if it contains the action parameter. // Return whether both tests were true or not return element.classList.contains(color) && element.closest("form").action.indexOf(action) > -1; } console.log(isElementValid(document.getElementById('text1'), 'blue', 'page2')); // false console.log(isElementValid(document.getElementById('button1'), 'blue', 'page2')); // false console.log(isElementValid(document.getElementById('text3'), 'blue', 'page2')); // false console.log(isElementValid(document.getElementById('text4'), 'blue', 'page2')); // true console.log(isElementValid(document.getElementById('button2'), 'blue', 'page2')); // true console.log(isElementValid(document.getElementById('button3'), 'blue', 'page2')); // true

 <form method="post" action="/page1"> <div> <ul> <li><input type="text" id="text1" class="red" /></li> <li><input type="text" id="text2" class="red" /></li> <li><button id="button1" class="blue">Enter</button></li> </ul> </div> </form> <form method="post" action="/page2"> <div> <ul> <li><input type="text" id="text3" class="red" /></li> <li><input type="text" id="text4" class="blue" /></li> <li><button id="button2" class="blue">Enter</button></li> </ul> </div> </form> <form method="post" action="/page2andpage3"> <div> <ul> <li><input type="text" id="text5" class="red" /></li> <li><input type="text" id="text6" class="blue" /></li> <li><button id="button3" class="blue">Enter</button></li> </ul> </div> </form>

Answer 3

Is it the closest form? I believe you just need this:

$(element).closest('form').attr('action');

Documentation and additional examples here .