Проверьте, имеет ли элемент определенный класс и принадлежит ли форма, которая содержит определенное значение

Question

Мне нужно создать функцию проверки, которая будет проверять определенный элемент на две вещи:

1. Он имеет определенный класс
2. Он принадлежит форме, содержащей частичное совпадение текста в действии формы

Например, с учетом следующего:

<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>

Я бы ожидал, что смогу создать функцию и получить следующие результаты:

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

Я предполагаю, что смогу использовать hasClass и родителей , чтобы создать что-то вроде:

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

Но я не уверен, как лучше проверить родителям форму с действием. Это правильно или есть лучший подход?

Answer 1

Чтобы определить, содержит ли атрибут элемента заданное значение, вы можете использовать селектор Атрибут содержит . Затем вы можете использовать свойство length результирующего объекта jQuery, чтобы определить, было ли что-либо найдено.

Также следует отметить, что в вашей логике c отсутствует префикс селектора # в element идентификаторы, которые вы используете. Попробуйте это:

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 действительно не так уж полезно для чего-то такого тривиального.

См. Комментарии в коде ниже.

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

Это самая близкая форма? Я считаю, что вам просто нужно это:

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

Документация и дополнительные примеры здесь .