时间戳

首页 > 解决方案 > 有条件地插入 HTML，考虑到兄弟姐妹的存在与否

javascript - 有条件地插入 HTML，考虑到兄弟姐妹的存在与否

问题描述

我正在实现表单的字段验证，并且我想在满足所述条件时插入一个段落。我在一个常量内有一个标记，它被插入到 HTML 中，条件是下一个兄弟元素不是这个标记，因此它只呈现一次，而不是多次。当我开始从下到上填充字段时，我可以毫无问题地发生这种情况，但是当我从上到下进行填充时，同样的情况不会发生，也就是说，条件给了我错误，因此该段落的渲染语句被执行，因此我有很多次相同的段落。

_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);
                }
            }))
    }

标签： javascripthtml

解决方案

使用匹配来测试下一个元素

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

推荐阅读