JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<form action="" class="form-chek">
  <div class="couple">
    <input class="chk_input" type="text">
    <textarea class="chk_text" name=""></textarea>
  </div>
  <div class="couple">
    <input class="chk chk_input" type="text">
    <textarea class="chk chk_text" name=""></textarea>
  </div>
  <input class="btn" type="submit">
</form>

CSS

.err{
  border: 1px solid #ff0000;
}

JavaScript

$('.form-chek').on('submit', function(){
		var subForm = 1;//Ставим флаг что пока форма норм заполнена
		$('.form-chek .couple').each(function(){//Начинаем перебор пар
      var parentBlcok = $(this),//кэшируем сам блок чтоб в дальнейшем не обращаться зря к дом дереву
          childField = parentBlcok.children('.chk_input'),//Берем берем предка поле
          childtext = parentBlcok.children('.chk_text');//Берем берем предка текст
          $('.chk_input,.chk_text').removeClass('err');//Перед проверко очищаем ошибки у всех полей
      if(childField.val() !== '' && childtext.val() === ''){//Если не заполнено текст то даем ему ошибку
        childtext.addClass('err');
        subForm = 0;//меняем флаг на ошибку
      }
      else if(childtext.val() !== '' && childField.val() === ''){//Иначе если не заполнено поле то даем ему ошибку
        childField.addClass('err');
        subForm = 0;//меняем флаг на ошибку
      }
 	 });
   if(subForm === 1){//После всего перебора мы проверяем флаг
   	return true;
   }
   else{
   	return false;
   }
   
});