動的フォームにバリデーションをつけたい

解決したいこと

動的に増える入力フォームに対してバリデーションをつけたいです。

コード

HTML
1<!DOCTYPE html>
2<html lang="ja" xmlns:th="http://www.thymeleaf.org">
3<head>
4<meta charset="UTF-8">
5<title>Insert title here</title>
6</head>
7<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
8<script th:src="@{/js/university.js}"></script>
9<body>
10	<form th:action="@{/insert}" method="post" th:object="${teacherForm}">
11	<div id="university">
12		<div class="item" data-formno="0">
13			<label th:if="${#fields.hasErrors('teacherList[0].university')}" th:errors="*{teacherList[0].university}" class="error1">エラー</label>
14			<input type="text" name="teacherList[0].university" class="daigaku" placeholder="大学" th:field="*{teacherList[0].university}">
15			
16			<label th:if="${#fields.hasErrors('teacherList[0].name')}" th:errors="*{teacherList[0].name}" class="error2">エラー</label>
17			<input type="text" name="teacherList[0].name" class="teacher" placeholder="教授" th:field="*{teacherList[0].name}">
18			
19			<label th:if="${#fields.hasErrors('teacherList[0].subject')}" th:errors="*{teacherList[0].subject}" class="error3">エラー</label>
20			<input type="text" name="teacherList[0].subject" class="subject" placeholder="科目"  th:field="*{teacherList[0].subject}">
21			<input type="button" value="削除" class="del">
22		</div>
23	</div>
24		<input type="button" value="追加" id="add">
25
26
27		<input type="submit" value="送信" />
28
29	</form>
30
31</body>
32</html>

JavaScript
1$(function() {
2	var num1;
3	
4	//クローンする
5	var copy = function(i) {
6		//クローンを変数に格納
7		clonecode = $('.item:last').clone(true);
8		
9		//数字を＋1し変数に格納
10		var num = clonecode.attr('data-formno');
11		num1 = parseInt(num) + 1;
12		
13		//data属性の数字を＋１
14		clonecode.attr('data-formno',num1);
15		
16		//name属性の数字を+1
17		var namecode = clonecode.find('input.daigaku').attr('name');
18		namecode = namecode.replace(/teacherList[[0-9]{1,2}/g,'teacherList[' + num1);
19		clonecode.find('input.daigaku').attr('name',namecode);
20		
21		var labelcode = clonecode.find('label.error1').attr('th:if');
22		labelcode = labelcode.replace(/teacherList[[0-9]{1,2}/g,'teacherList[' + num1);
23		clonecode.find('label.error1').attr('th:if',labelcode);
24		
25		var namecode = clonecode.find('input.teacher').attr('name');
26		namecode = namecode.replace(/teacherList[[0-9]{1,2}/g,'teacherList[' + num1);
27		clonecode.find('input.teacher').attr('name',namecode);
28		
29		var namecode = clonecode.find('input.subject').attr('name');
30		namecode = namecode.replace(/teacherList[[0-9]{1,2}/g,'teacherList[' + num1);
31		clonecode.find('input.subject').attr('name',namecode);
32		
33		//HTMLに追加
34		clonecode.insertAfter($('.item:last'));
35	};
36
37	//追加
38	$('#add').click(function() {
39		copy();
40		clonecode.find('input.daigaku').val('');
41		clonecode.find('input.teacher').val('');
42		clonecode.find('input.subject').val('');
43	});	
44
45	//削除
46	$('.del').click(function() {
47		//クリックされた削除ボタンの親要素を削除
48		var len = document.getElementsByClassName("item");
49		if(len.length > 1) {
50			$(this).parents(".item").remove();
51		} else {
52			alert('消せません');
53		}
54
55		var count = 0;
56		
57		//番号振り直し
58		$('.item').each(function(){
59			
60			//data属性の数字
61			$(this).attr('data-formno',count);
62		
63			//input質問タイトル番号振り直し
64			var name = $('input.daigaku',this).attr('name');
65			name = name.replace(/teacherList[[0-9]{1,2}/g,'teacherList[' + count);
66			$('input.daigaku',this).attr('name',name);
67			
68			var name = $('input.teacher',this).attr('name');
69			name = name.replace(/teacherList[[0-9]{1,2}/g,'teacherList[' + count);
70			$('input.teacher',this).attr('name',name);
71			
72			var name = $('input.subject',this).attr('name');
73			name = name.replace(/teacherList[[0-9]{1,2}/g,'teacherList[' + count);
74			$('input.subject',this).attr('name',name);
75	
76			count += 1;
77		});
78	});
79});

Teacher
1package com.example.domain;
2
3
4import javax.validation.constraints.NotNull;
5
6import lombok.Data;
7
8@Data
9public class Teacher {
10
11	private Integer id;
12	@NotNull
13	private String university;
14	@NotNull
15	private String name;
16	@NotNull
17	private String subject;
18}

TeacherForm
1package com.example.form;
2
3import java.util.List;
4
5import javax.validation.Valid;
6
7import com.example.domain.Teacher;
8
9import lombok.Data;
10
11@Data
12public class TeacherForm {
13	
14	@Valid
15	private List<Teacher> teacherList;
16}

TeacherController
1package com.example.controller;
2
3import org.springframework.beans.factory.annotation.Autowired;
4import org.springframework.stereotype.Controller;
5import org.springframework.validation.BindingResult;
6import org.springframework.validation.annotation.Validated;
7import org.springframework.web.bind.annotation.ModelAttribute;
8import org.springframework.web.bind.annotation.RequestMapping;
9
10import com.example.domain.Teacher;
11import com.example.form.TeacherForm;
12import com.example.repository.TeacherRepository;
13
14@Controller
15@RequestMapping("/")
16public class TeacherController {
17	
18	@ModelAttribute
19	public TeacherForm setUpUpdateEmployeeForm() {
20		return new TeacherForm();
21	}
22
23	@Autowired
24	private TeacherRepository teacherRepository;
25
26	@RequestMapping("")
27	public String index() {
28		return "index";
29	}
30
31	@RequestMapping("/insert")
32	public String insert(@Validated TeacherForm teacherForm, BindingResult result) {
33		if(result.hasErrors()) {
34			return index();
35		}
36		for (Teacher teacher : teacherForm.getTeacherList()) {
37				teacher.setUniversity(teacher.getUniversity());
38				teacher.setName(teacher.getName());
39				teacher.setSubject(teacher.getSubject());
40				teacherRepository.insert(teacher);
41				teacherRepository.delete(teacher);
42		}
43		return "redirect:/";
44	}
45}
46