위로
아래
validate 함수 생성
제이쿼리 파일 삽입과 임폴트 후,
밸리데이션을 위한 validate 함수를 생성.
<script src="jquery/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
function validate(){
let flen = $("form[name=form1] .chk").length;
for(i=0;i<flen;i++){
if($(".chk").eq(i).val()=="" ||
$(".chk").eq(i).val()==null ||
$(".chk").eq(i).val().trim()==""){
alert($(".chk").eq(i).attr("title") + "은 꼭 입력해주세요.");
$(".chk").focus();
return false;
}
}
return true;
}
</script>
form1이라는 이름을 가진 form 태그 안의 요소들 중, 클래스 명이 chk인 요소들을 조사.
chk의 개수만큼 반복문을 통해, chk가 공란이 요소가 있는지 확인.
있을 경우, 속석명 title의 값을 출력하며 해당 칸으로 focus 옮기기.
공란이 있을 경우 false를, 공란이 없을 경우 true를 반환.
공란이면 안 되는 요소 선정
이전에 작성했던 HTML 태그에 공란이면 안 되는 요소들 선정. - 제목, 작성자, 글 내용, 비밀번호
선정한 요소들은 클래스 명으로 chk 부여.
경고문 출력을 위해 title 속성과 그 값 부여.
<form name="form1" method="post" action="">
<table>
<tr><td colspan="2"><h3>게시글 쓰기</h3></td></tr>
<tr>
<th>제목</th>
<td><input type="text" name="subject" class="chk" title="제목"></td>
</tr>
<tr>
<th>작성자</th>
<td><input type="text" name="writer" class="chk" title="작성자"></td>
</tr>
<tr>
<th>글 내용</th>
<td><textarea name="content" class="chk" title="글내용"></textarea></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="passwd" class="chk" title="비밀번호"></td>
</tr>
<tr>
<td colspan="2">
<input class="btn" type="button" value="글 저장" id="submit11">
<input class="btn" type="button" value="글 목록" onclick="">
</td>
</tr>
</table>
</form>
validate() 함수 호출
<script src="jquery/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$().ready(function(){
$("#submit11").on("click",function(){
if(validate()){
$("form[name=form1]").submit();
}
})
})
</script>validate() 함수의 결과가 true일 경우 form 태그를 전송.
전체 코드
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 작성</title>
<link rel="stylesheet" type="text/css" href="css/Form.css">
<script src="jquery/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$().ready(function(){
$("#submit11").on("click",function(){
if(validate()){
$("form[name=form1]").submit();
}
})
})
function validate(){
let flen = $("form[name=form1] .chk").length;
for(i=0;i<flen;i++){
if($(".chk").eq(i).val()=="" ||
$(".chk").eq(i).val()==null ||
$(".chk").eq(i).val().trim()==""){
alert($(".chk").eq(i).attr("title") + "은 꼭 입력해주세요.");
$(".chk").focus();
return false;
}
}
return true;
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table>
<tr><td colspan="2"><h3>게시글 쓰기</h3></td></tr>
<tr>
<th>제목</th>
<td><input type="text" name="subject" class="chk" title="제목"></td>
</tr>
<tr>
<th>작성자</th>
<td><input type="text" name="writer" class="chk" title="작성자"></td>
</tr>
<tr>
<th>글 내용</th>
<td><textarea name="content" class="chk" title="글내용"></textarea></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="passwd" class="chk" title="비밀번호"></td>
</tr>
<tr>
<td colspan="2">
<input class="btn" type="button" value="글 저장" id="submit11">
<input class="btn" type="button" value="글 목록" onclick="">
</td>
</tr>
</table>
</form>
</body>
</html>