💡 학습 목표
- 문서에서 form 에 접근 방법
- onsubmit 에 대한 이해
- validation에 이해
|
시나리오 코드 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
list-style: none;
}
li {
display: flex;
align-items: center;
justify-content: space-around;
}
label {
margin-right: 20px;
margin-bottom: 4px;
}
.flex--container {
display: flex;
justify-content: center;
margin: 100px;
}
</style>
</head>
<body>
<div class="flex--container" >
<form action="" onsubmit="return false;">
<fieldset>
<legend>배송지입력</legend>
<ul>
<li>
<label for="userName1">이름 : </label>
<input type="text" class="input--box" name="name" id="userName1" value="홍길동">
</li>
<li>
<label for="tel1">연락처 : </label>
<input type="text" class="input--box" name="tel" id="tel1" value="010-1234-1234">
</li>
</ul>
<button type="button" onclick="check()">check</button>
</fieldset>
</form>
<br>
<form action="https://www.naver.com" onsubmit="return false;">
<fieldset>
<legend>배송지입력2</legend>
<ul>
<li>
<label for="userName2">이름 : </label>
<input type="text" class="input--box" name="name" value="">
</li>
<li>
<label for="tel2">연락처 : </label>
<input type="text" class="input--box" name="tel" value="">
</li>
</ul>
<button type="button" onclick="send()">send</button>
</fieldset>
</form>
</div>
<script>
function check() {
let form1 = document.forms[0];
let form2 = window.document.forms[1];
// 자바스크립트를 통해서 요소 복사 처리
form2.elements["name"].value = form1.elements["name"].value;
form2.elements["tel"].value = form1.elements["tel"].value;
console.log("form1", form1);
}
function send() {
// 유효성 검사가 전부 true 라면
if( validationFrom() ) {
// form 에 submit() 메서드를 호출하면 자바스크립트에서 서버측으로 제출할 수 있다.
document.forms[1].submit();
}
}
function validationFrom() {
let form2 = document.forms[1];
let name = form2.elements["name"].value;
let tel = form2.elements["tel"].value;
let isOk = true;
//console.log("name", name);
//console.log("tel", tel);
console.log(typeof name);
console.log(typeof tel);
if(!name) {
alert("이름을 입력하세요");
isOk = false;
return ;
}
if(!tel) {
alert("연락처를 입력하세요");
isOk = false;
return ;
}
// 정규표현식 (숫자, 010으로 시작 하는가.. GPT)
if(tel.length < 3 ) {
alert("올바른 연락처를 입력하세요");
isOk = false;
return ;
}
return isOk;
}
</script>
</body>
</html>
- 문서에서 form에 접근 방법:
- JavaScript에서는 document.forms를 통해 페이지 내의 모든 폼 요소에 접근할 수 있습니다. 이는 HTMLFormElement의 HTMLCollection입니다. 예를 들어, document.forms[0]은 페이지 내의 첫 번째 폼 요소에 접근하고, document.forms[1]은 두 번째 폼 요소에 접근합니다.
- 폼 내의 입력 요소에 접근하기 위해 elements 속성을 사용할 수 있습니다. 예: document.forms[0].elements["name"]는 첫 번째 폼의 name 속성을 가진 입력 요소에 접근합니다.
- onsubmit에 대한 이해:
- onsubmit 이벤트는 폼이 제출될 때 발생합니다.
- 폼의 onsubmit 속성에 "return false;"를 설정하면, 폼이 실제로 제출되지 않습니다. 이는 페이지가 새로고침되는 것을 방지합니다. 일반적으로, 이 방법은 JavaScript를 통해 추가 유효성 검사를 수행하거나 AJAX를 사용하여 폼 데이터를 제출할 때 유용합니다.
- validation에 대한 이해:
- 유효성 검사(validation)는 사용자가 입력한 데이터가 올바른 형식인지 확인하는 과정입니다.
- JavaScript에서는 유효성 검사를 수행하여 사용자에게 오류 메시지를 표시하거나, 올바른 데이터만 서버로 전송할 수 있습니다.
- 예제에서는 validationForm() 함수가 유효성 검사를 수행합니다. 이름이 비어 있거나, 연락처가 숫자가 아닌 경우 경고 메시지를 표시합니다.
