动态手风琴表单验证

Question

我一直在尝试创建一个动态手风琴，你可以在其中添加新的手风琴标签，其中包含更多表单字段，以便为程序的每个参与者添加详细信息。我的问题是我想确保每次用户尝试添加新标签时我都希望确保以前的字段已填写。我的功能不起作用，但我不认为我是最好的方式。

这是我的代码。请对整个剧本留下一些建设性的批评我确定有一些不好的做法，但我在这里学习。如果你能帮助很好。

由于 https://jsfiddle.net/gmd0gkso/#&togetherjs=HV5cxkKT14

           /============================================
	       //		Acordian tabs 
	       //=============================================

	       
			accordion_function();
			//Add new tab button
			var add_tab = document.getElementById("btn-add");
			add_tab.addEventListener ("click", add_new_tab);
			
			//Add new tab function
			function add_new_tab(){

				if(validate_form($('.accordion_holder').last()) == true){

					var clone = $('.accordion_holder').first().clone();
	
					clone.find("input:text").val("").end();
					clone.insertBefore('#button_area');
					accordion_function();
				}
				
			}

			//Add functionaly to accordian
			function accordion_function(){

				var acc = document.getElementsByClassName("accordion");

				for (var i=0; i < acc.length; i++) {
				    acc[i].onclick = function(){
				        this.classList.toggle("active");
				        this.nextElementSibling.classList.toggle("show");
				    }
				}

				for (var i=0; i < (acc.length-1); i++){
					if($(acc[i]).hasClass('active')){
						acc[i].classList.toggle("active");
						acc[i].nextElementSibling.classList.toggle("show")
					}
				}

				if(acc.length > 1){
					var last = acc[acc.length-1];
					if(!$(last).hasClass('active')){
						last.classList.toggle("active");
						last.nextElementSibling.classList.toggle("show");
					}
					
				}			
			}

			function validate_form(obj){
			
				$('obj input').each(function(){
					console.log(this);
					if(this.val()==null || this.val()==""){
						this.focus();
						this.css('border: 2px soild red');
						return false;
					}else{
						console.log("Fine");
					}
				});
				console.log("nada");
				return true;
			}

HTML

<form>
<div class="accordion_holder">
	<button type="button" class="accordion">Add Student</button>
	<div class="panel">
	  <p>
		<div class="row">
			<h3 class="raleway" style="margin: 20px 0;color: #fff; font-weight: 400">General INFORMATION</h3>

			<div class="form-input-lg" style="margin-right: 2%">
			  	<label for="fName">First Name</label>
			  	<input type="text" name="fName" id="fName" class="form-control" aria-describedby="basic-addon1"  required>
			</div>
			<div class="form-input-lg">
			  	<label for="lName">Last Name</label>
			  	<input type="text" name="lName" id="lName" class="form-control" aria-describedby="basic-addon1" required>
			</div>
		</div>
		<div class="row">
			<div class="form-input-lg " style="margin-right: 2%">
			  	<label for="fName">Date of Birth</label>
			  	<input  type="date" name="fName" id="fName" class="form-control" aria-describedby="basic-addon1" required>
			</div>
			<div class="form-input-lg">
			  	<label for="lName">Gender</label>
			  	<select name="gender" id="gender">
			  		<option value="male">Male</option>
			  		<option value="female">Female</option>
			  	</select>
			</div>
		</div>
		<div class="row">
			<label for="fName" style="display:block">Dietary Requirements</label>
			<textarea rows="4" class="student-details-ta"></textarea>
		</div>
	  </p>
	</div>
</div>
<div id="button_area"> 
	<button type="button" id="btn-add" style="float: right; margin: 8px ">Add <span><i class="fa fa-user-plus" aria-hidden="true"></i></span></button>
	<input type="submit" value="Submit" style="float: right; margin: 8px; font-weight: 400 ">
</div>
</form>