Блог

Главная - Вопросы по программированию - Вставка HTML условно, с учетом наличия или отсутствия родного брата

Вставка HTML условно, с учетом наличия или отсутствия родного брата

#javascript #html

Вопрос:

Я выполняю проверку поля формы и хочу вставить абзац, когда будет выполнено указанное условие. У меня есть разметка внутри константы, которая вставляется в HTML, при условии, что следующий элемент-брат не является этой разметкой, так что он отображается только один раз, а не несколько раз. У меня это происходит без проблем, когда я начинаю заполнять поля снизу вверх, но то же самое не происходит, когда я делаю это сверху вниз, то есть условие дает мне значение false , поэтому выполняется оператор рендеринга абзаца, и в результате у меня один и тот же абзац, много раз.

  • HTML 
        <div class="upload__column upload__column-2 ">
  <h3 class="upload__heading">Ingredients</h3>
  <!-- <p>Please use format</p> -->
  <label>Ingredient 1</label>
  <input value="0.5,kg,Rice" type="text" required name="ingredient-1"
    placeholder="Format: 'Quantity,Unit,Description'" />

  <label>Ingredient 2</label>
  <input value="1,,Avocado" type="text" name="ingredient-2" placeholder="Format: 'Quantity,Unit,Description'" />
  <label>Ingredient 3</label>
  <input value=",,salt" type="text" name="ingredient-3" placeholder="Format: 'Quantity,Unit,Description'" />
  <label>Ingredient 4</label>
  <input type="text" name="ingredient-4" placeholder="Format: 'Quantity,Unit,Description'" />
  <label>Ingredient 5</label>
  <input type="text" name="ingredient-5" placeholder="Format: 'Quantity,Unit,Description'" />
  <label>Ingredient 6</label>
  <input type="text" name="ingredient-6" placeholder="Format: 'Quantity,Unit,Description'" />
</div>
  • язык JavaScript
 _uploadColumnIng = document.querySelector('.upload__column-2').querySelectorAll('input');

 _addHandlerTakeInputs() {
        const markup = `<div class='input-err'><p >Please use format</p></div>`;
        const regExp = /[0-9|f| ],(gr|ml|kg),[A-z]{4,15}$/i;


        this._uploadColumnIng.forEach(el => el.addEventListener
            ('keyup', function () {
                const inputErr = document.querySelector('.input-err');
                if (regExp.test(el.value)) {
                    if (el.nextElementSibling === inputErr) return;
                    el.insertAdjacentHTML('afterend', markup);
                }
            }))
    }

Ответ №1:

Используйте совпадения для проверки следующего элемента

 _uploadColumnIng = document.querySelector('.upload__column-2').querySelectorAll('input');


const markup = `<div class='input-err'><p >Please use format</p></div>`;
const regExp = /[0-9|f| ],(gr|ml|kg),[A-z]{4,15}$/i;


this._uploadColumnIng.forEach(el => el.addEventListener('keyup', function() {  
  if (!regExp.test(el.value)) {
    if (!el.nextElementSibling || !el.nextElementSibling.matches(".input-err")){
      el.insertAdjacentHTML('afterend', markup);
    }
  }
})); 
 <div class="upload__column upload__column-2 ">
  <h3 class="upload__heading">Ingredients</h3>
  <!-- <p>Please use format</p> -->
  <label>Ingredient 1</label>
  <input value="0.5,kg,Rice" type="text" required name="ingredient-1" placeholder="Format: 'Quantity,Unit,Description'" />

  <label>Ingredient 2</label>
  <input value="1,,Avocado" type="text" name="ingredient-2" placeholder="Format: 'Quantity,Unit,Description'" />
  <label>Ingredient 3</label>
  <input value=",,salt" type="text" name="ingredient-3" placeholder="Format: 'Quantity,Unit,Description'" />
  <label>Ingredient 4</label>
  <input type="text" name="ingredient-4" placeholder="Format: 'Quantity,Unit,Description'" />
  <label>Ingredient 5</label>
  <input type="text" name="ingredient-5" placeholder="Format: 'Quantity,Unit,Description'" />
  <label>Ingredient 6</label>
  <input type="text" name="ingredient-6" placeholder="Format: 'Quantity,Unit,Description'" />
</div>

Но вот как бы я на самом деле это сделал. Имейте сообщения об ошибках на месте, скрытые CSS. Затем переключите класс ошибок в элементе формы, чтобы отобразить их.

 _uploadColumnIng = document.querySelector('.upload__column-2').querySelectorAll('input');

const regExp = /[0-9|f| ],(gr|ml|kg),[A-z]{4,15}$/i;

this._uploadColumnIng.forEach(el => el.addEventListener('keyup', function() {
  el.classList.toggle("error", regExp.test(el.value) );
})); 
 .input-err {display:none;}
.error   .input-err {display:block;}
.error {color:red;} 
 <div class="upload__column upload__column-2 ">
  <h3 class="upload__heading">Ingredients</h3>
  <!-- <p>Please use format</p> -->
  <label>Ingredient 1</label>
  <input value="0.5,kg,Rice" type="text" required name="ingredient-1" placeholder="Format: 'Quantity,Unit,Description'" />
  <div class='input-err'><p >Please use format</p></div> 
  <label>Ingredient 2</label>
  <input value="1,,Avocado" type="text" name="ingredient-2" placeholder="Format: 'Quantity,Unit,Description'" />
  <div class='input-err'><p >Please use format</p></div>
  <label>Ingredient 3</label>
  <input value=",,salt" type="text" name="ingredient-3" placeholder="Format: 'Quantity,Unit,Description'" />
  <div class='input-err'><p >Please use format</p></div>
  <label>Ingredient 4</label>
  <input type="text" name="ingredient-4" placeholder="Format: 'Quantity,Unit,Description'" />
  <div class='input-err'><p >Please use format</p></div>
  <label>Ingredient 5</label>
  <input type="text" name="ingredient-5" placeholder="Format: 'Quantity,Unit,Description'" />
  <div class='input-err'><p >Please use format</p></div>
  <label>Ingredient 6</label>
  <input type="text" name="ingredient-6" placeholder="Format: 'Quantity,Unit,Description'" />
  <div class='input-err'><p >Please use format</p></div>
</div>

Комментарии:

1. Привет @Jon P , спасибо за ваш ответ ! Я знаю, что лучше работать со скрытым CSS, но я просто хотел выполнить это упражнение. Использование «совпадений» сработало для входных данных «ингредиенты-4» и «ингредиенты-5» , но для «ингредиентов-6» я получаю эту ошибку : не удается прочитать свойство «совпадения» null в HTMLInputElement. Спасибо !

2. Немного подправить логику, нужно отменить тест и проверить, существует ли брат или сестра

Метки: ,