유효성 검사
<form id="target" action="result.html">
<label for="name">name</label>
<input id="name" type="text" />
<input type="submit">
</form>
<script>
let t = document.getElementById('target');
t.addEventListener('submit',function( eventObj ){
if( document.getElementById('name').value.length == 0 ){
alert("값을 입력해주세요");
eventObj.preventDefault();
}
});
</script>회원 가입 폼
<style type="text/css">
/** 하나의 입력 영역을 정의하는 <div>태그 */
.input_group {
height: 42px;
border-bottom: 1px dotted #ccc;
font: 1em/40px '돋움', 'Helvetica';
}
/** 입력양식의 제목을 볼 수 있게 하는 태그 */
.input_group > label {
width: 80px; display: inline-block;
}
</style>
</head>
<body>
<form name="form1" onsubmit="doSubmit(); return false;">
<fieldset>
<legend>회원가입</legend>
<div class="input_group first">
<label>이름</label>
<input type="text" name="user_name" id="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="reset" name="button2" value="리셋" />
</div>
</fieldset>
</form>
~2시
<script>
function doSubmit(){
// 폼 객체
let frm = document.form1;
// 이름 입력여부 검사
// 값이 없을 때 true값을 return
if( !frm.user_name.value ){
alert("이름을 입력해 주세요.");
frm.user_name.focus();
return false;
}
// 라디오버튼의 입력여부 검사
if( !frm.gender[0].checked && !frm.gender[1].checked ){
alert("성별을 선택해 주세요");
return false;
}
// select 요소에 대한 검사
if( frm.job.selectedIndex < 1 ){
alert("직업을 선택해주세요.");
return false;
}
// 체크박스 선택여부 검사
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>
개발자로 진로 변경을 위해 준비하고 있습니다