Как сделать валидацию полей input

162

20 декабря 2021, 23:20

Создаю таблицу при помощи jquery в ней есть 3 input, не могу понять как седлать валидацию для input которые идут в один ряд tr. Нужно чтоб когда 3 инпута в ряду заполнились галочка "V" стала зеленого цвета и так работало для каждого ряда отдельно.

   $(".add-table-row").click(function() { 
 
      let table = $("#table-interactive tbody"); 
      let markup = `  <tr class="row-interactive-table" > 
                                <td class="counter-tr"></td> 
                                <td> 
                                    <label> <input type="text" placeholder="Введите ФИО" ></label> 
                                </td> 
                                <td> 
                                    <label > <input type="email" placeholder="Введите E-mail" ></label> 
                                </td> 
                                  <td> 
                                    <label > <input type="tel" placeholder="Введите Телефон" ></label> 
                                </td> 
                                <td class="check-tr-row"> 
                                   V 
 
                                </td> 
                                <td class="close-tr-row"> 
                                    <div class="close-tr"> 
                                        X 
                                    </div> 
                                </td> 
                            </tr>`; 
      table.append(markup); 
 
      //  считаем и выводим строки таблицы 
      table.each(function() { 
        $('.counter-tr', this).each(function(i) { 
          $(this).text('' + (i + 1)) 
        }) 
      }); 
 
      // удаляем по крестику 
      $(".close-tr").click(function() { 
        $(this).parents("tr").remove(); 
      }); 
 
 
    });

.close-tr { 
color: red 
} 
   
.check-tr-row { 
  color: gray 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html lang="en"> 
 
  <head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
  </head> 
 
  <body> 
    <div class="invite-input-area"> 
 
      <table class="table invite-input-table table-responsive-md" id="table-interactive"> 
        <tbody> 
 
        </tbody> 
      </table> 
 
      <a href="#" class="add-table-row"> + Добавить</a> 
    </div> 
  </body> 
 
</html>