Заполните div текстом ошибки, если он пуст рекурсивно

Question

У меня есть форма, и при нажатии на кнопку отправки я хочу проверять каждые <div id="val"></div>, если они пустые (их много в коде html), тогда они будут заполнены текстовой ошибкой, их много, поэтому следует быть рекурсивным Этот код ниже, добавьте текст «ошибка» только к первому, я хочу применить его ко всем пустым div.

$('.btn[type="submit"]').click(function() {
    function isEmpty( el ){
        if(!$.trim(el.html())) {
            $(el).html('error');
        }
    }
    if (isEmpty($('#val'))) {
        // do something
        $('#val').html('error');
    }
 })

Answer 1

идентификаторы должны быть уникальными в DOM, поэтому замените все идентификаторы на класс, и тогда вы можете легко вызвать isEmpty() функцию внутри .each(), например:

function isEmpty(el) {
  if (!$.trim(el.html())) {
    $(el).html('error');
  }
}

$("div.val").each(function() {
  isEmpty($(this))
});

.val{margin:5px;padding:4px 8px;background-color:skyblue}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="val">Not Empty</div>
<div class="val"></div>
<div class="val"></div>

---

Вы также можете сократить .each() l oop код, изменив функцию isEmpty, например:

function isEmpty(_, el) {
  if (!$.trim($(el).html())) {
    $(el).html('error');
  }
}

и затем вы можете позвонить в .each() l oop как:

function isEmpty(_, el) {
  if (!$.trim($(el).html())) {
    $(el).html('error');
  }
}

$("div.val").each(isEmpty);

.val{margin:5px;padding:4px 8px;background-color:skyblue}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="val">Not Empty</div>
<div class="val"></div>
<div class="val"></div>

Answer 2

Для тегов div с несколькими дочерними элементами div. Вам не нужна какая-то рекурсивная функция, потому что jquery может выполнить всю работу за вас с помощью $ ('tag') или $ ('. Class') et c. и будет принимать все теги на основе имени тега или класса. С помощью метода each () вы можете l oop пройти через все элементы и использовать метод html $ (this). html (), если у тега есть несколько дочерних элементов, метод не вернет пустой, вернет все дети. Итерируя один за другим, вы найдете пустые теги.

$('div').each(function(){
  if($(this).html().trim()==='') {
    $(this).html('erorr');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
	<!-- error text here with color red -->
	<div style="color:red;"></div> 
	<!-- blue text  -->
	<div style="color:blue;">has text</div>
</div>
<!-- error text with  color default-->
<div></div>
  
<div>
	<div>
		<!-- error text with  color default-->
		<div>
		
		</div>
	</div>
	<div>
		test
	</div>
</div>

Answer 3

Я предлагаю вам использовать класс вместо id в качестве "val", так как использование одного и того же идентификатора несколько раз не является хорошей практикой. Кстати, вы можете использовать следующее:

$("form").on("submit", function() {
    $("div.val").each(function() { // please see the notes below
        if($(this).html() == '') {
            $(this).html('error');
        }
    });
});

ПРИМЕЧАНИЕ: я заменил

<div id="val"></div> 

на

<div class="val"></div>