• Как сравнить input с другим select?

    neuotq
    @neuotq
    Прокрастинация
    Тут конечно много вариантов, лучше в целом переписать на чем-нить реакт подобном и сравнивать по данным перед рендером. Но если ваш пример, то можно использовать те же dataset поля чтобы проверять что уже добавлен такой.
    В моем примере я проверяю просто категорию, вы уже сами добавите нужные вам доп проверки
    /* Добавляем в li dataset поле category-id в котором будем хранить категорию
    По желанию добавляешь и другие
    а если подкатегории входят в категорию и каждая имеет только одного родителя то можно обойтись одной подкатегорией
    */
    $("#categoryAll").append(
        `<li class="flex group-form-elements" data-category-id="${cat1}">
            <div>
              <input type="hidden" name="incidentmain[]" value="${cat1}" class="incedentSelected">
              <span>${txt1}</span>
            </div>
            <div>
              <input type="hidden" name="incidentsubcategory[]"  value="${cat2}" class="subcatSelected">
              <span>${txt2}</span>
            </div>
            <div>
              <input type="hidden" name="IncidentDetection[]" value="${cat3}">
              <span>${txt3}</span>
            </div>
            <div>
              <span class="delCategory button delete">Удалить</span>
            </div>
         </li>`
      );

    Ну и в самом коде в проверках ваших делаем запрос, если такой элемент находится обрубаем исполнение
    if ( document.querySelector(`[data-category-id="${cat1}"]`)) {
        alert("Такую категорию уже добавляли");
        return false;
      }

    Весь пример, дальше дорабатывайте под себя:
    Ответ написан
    1 комментарий
  • Как проверить, что элементы с атрибутом required заполнены?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Можно использовать встроенную валидацию, которую поддерживают современные браузеры.

    В простом варианте селекторами input:required и select:required можно выбрать все инпуты с атрибутом required.

    Для radio достаточно указать required у первого элемента.
    Для select опции-затычке надо указать value="" и добавить атрибуты disabled hidden selected, чтобы такая опция не считалась заполнением.

    При клике на следующих табах, или псевдо-кнопке внизу, проверять у текущих инпутов свойства element.validity.valueMissing:
    true означает пустоту обязательного поля. Когда не все поля валидны, то preventDefault() событию предотвратит переключение таба.
    Ответ написан
    4 комментария
  • Как проверить, что элементы с атрибутом required заполнены?

    irtek
    @irtek
    Wordpress-addicted
    Каждое содержание таба нужно обернуть, например в блок с ID атрибутом

    <div id="tab_1">
    ...
    
    <button id="tab_1_submit">Перейти к табу 2</button>
    </div>
    <div id="tab_2">
    ...
    
    <button id="tab_2_submit">Перейти к табу 3</button>
    </div>


    Далее на кнопки внутри каждого таба вешаете событие 'click', в котором проверяете есть ли значения у всех required элементов

    Если через JS в первом табе получаете список обязательных полей так

    const requiredFields = document.getElementById('tab_1').querySelectorAll('[required]')


    Если через jQuery в первом табе получаете так

    const requiredFields = $('#tab_1 [required]')

    Проходите по спискам и проверяете заполненность полей

    Получается, что из radio он находит только первый пол мужской, а элемент женский не читает, хотя он тоже считается required.
    Нужно, чтобы он проверял любой пол.


    Так и будет, т.к. поля у вас объединены общим name="gender", а атрибут required достаточно повесить на первое поле.
    Ответ написан
    1 комментарий