<body>
<form name="form1" onsubmit="doSubmit(); return false;">
<fieldset>
<legend>회원가입</legend>
<div class="input_group first">
<label>이름</label>
<input type="text" name="user_name" />
</div>
<div class="input_group">
<label>성별</label>
<label><input type="radio" name="gender" value="M"> 남자</label>
<label><input type="radio" name="gender" value="F"> 여자</label>
</div>
<div class="input_group">
<label>직업</label>
<select name="job">
<option>----- 선택하세요 -----</option>
<option value="dev">프로그래머</option>
<option value="pub">퍼블리셔</option>
</select>
</div>
<div class="input_group">
<label>취미</label>
<label><input type="checkbox" value="축구" name="hobby"> 축구</label>
<label><input type="checkbox" value="농구" name="hobby"> 농구</label>
<label><input type="checkbox" value="야구" name="hobby"> 야구</label>
</div>
<div class="input_group">
<label> </label>
<input type="submit" name="button" value="제출" />
<input type="button" name="button2" value="리셋" onclick="doReset();"/>
</div>
</fieldset>
</form>
<script>
-----------------------------------------------------
// reset
function doReset(){
document.form1.reset();
}
// validation check
function doSubmit(){
// 폼 객체
let frm = document.form1;
// 이름 요소 입력여부 검사
if( !frm.user_name.value ){
alert('이름을 입력해주세요.');
frm.user_name.focus();
return false;
}
// 라디오 버튼
if( !frm.gender[0].checked && !frm.gender[1].checked ){
alert('성별을 선택해주세요.');
frm.gender[0].focus();
return false;
}
// select 박스
if( frm.job.selectedIndex < 1 ){
alert('직업을 선택해주세요.');
frm.job.focus();
return false;
}
// check 박스
let chk = false;
for( let i = 0; i<frm.hobby.length; i++ ){
if( frm.hobby[i].checked ){
chk = true;
break;
}
}
if( !chk ){
alert('취미를 선택해주세요.');
return false;
}
// 입력확인하기
if( confirm('입력하신 내용이 맞습니까?') ){
frm.submit();
}
}
</script>
</body>
개발자