[JS] 파일 첨부 여부 체크

<form class="form-horizontal" id="boardFrm" action="#" th:object="${courseSection}" method="post" enctype="multipart/form-data" >
<div class="form-group">
	<label class="col-sm-2 control-label"><i class="fa fa-file-excel-o text-info"></i>업로드파일</label>
	<div class="col-sm-10">
		<input type="file" name="files" id="files" accept=".pdf">
	</div>
</div>
</form>

 

 

form 을 전송하기 전에 데이터가 유효한지 체크하고

데이터가 유효하지 않으면, form을 전송하지 않는다.

files 이라는 아이디를 가진 input에서 값을 가져와서, 값이 있는지 확인한다

 

<script th:inline="javascript">

$("#boardFrm").submit(function(e){
	if(!isValidated()) {
		e.preventDefault();
		return;
	}
});

function isValidated() {
		let currentFile = $('#files').val();

		/*<![CDATA[*/
		let isPrevFileExist = /*[[ ${isPrevFileExist} ]]*/;
		/*]]>*/

		if (!currentFile && !isPrevFileExist) {
			alert("파일을 선택하세요.");
			return false;
		} else {        
        	...        
		}
}

</script>

 

* 주의 사항 #은 아이디고, .은 클래스다