// 체크박스의 id는 shippingInfo
doc01.querySelector("#checkSame").addEventListener("change", chkHandler)
chkHandler = e => { // check 요소 변화 이벤트에 대한 핸들러
if(e.target.checked) { // 체크박스가 체크 되었을 때
doc01.querySelector("#shippingName").value = document.querySelector("#billingName").value
doc01.querySelector("#shippingTel").value = document.querySelector("#billingTel").value
doc01.querySelector("#shippingAddr").value = document.querySelector("#billingAddr").value
} else { // 체크되어 있지 않다면 배송 정보 필드를 지움.
doc01.querySelector("#shippingName").value = ""
doc01.querySelector("#shippingTel").value = ""
doc01.querySelector("#shippingAddr").value = ""
}
// check되어 있을 경우는 배송 정보 input들을 변경할 수 없도록 disabled 속성을 설정
doc01.querySelector("#shippingName").disabled = e.target.checked
doc01.querySelector("#shippingTel").disabled = e.target.checked
doc01.querySelector("#shippingAddr").disabled = e.target.checked
}
doc01 = html`
<form method="post" action="https://postman-echo.com/post" target="_blank">
<fieldset id="orderInfo">
<legend> 주문 정보 </legend>
<label class="field" for="billingName">이름 : </label>
<input type="text" class="input-box" id="billingName" name="billingName">
<label class="field" for="billingTel">연락처 : </label>
<input type="text" class="input-box" id="billingTel" name="billingTel">
<label class="field" for="billingAddr">주소 : </label>
<input type="text" class="input-box" id="billingAddr" name="billingAddr">
</fieldset>
<fieldset id="shippingInfo">
<legend> 배송 정보 (<input type="checkbox" id="checkSame" name="sameChk">
<label for="sameChk" class="check">주문 정보와 같음</label>)</legend>
<label class="field" for="shippingName">이름 : </label>
<input type="text" class="input-box" id="shippingName" name="shippingName">
<label class="field" for="shippingTel">연락처 : </label>
<input type="text" class="input-box" id="shippingTel" name="shippingTel">
<label class="field" for="shippingAddr">주소 : </label>
<input type="text" class="input-box" id="shippingAddr" name="shippingAddr">
</fieldset>
<button type="submit" class="order">결제하기</button>
</form>
`
// 입력 길이 검사 기능은 HTML5의 maxinput, mininput 을 사용하면 sumbit을 할 때 validation 기본적으로 동작
// 그런데 submit 할때까지 기다리지 않고 변화가 일어날 때마가 사용자에게 즉시 에러 메시지를 보여주고 싶으면
doc02.querySelector("#userid").onchange = e => {
const input = e.target
input.checkValidity() // 검사를 하고
input.reportValidity() // 검사 결과를 보여주자
}
// HTML5의 기능을 활용하면 아래 수동 JavaScript 검사는 굳이 작성하지 않아도 된
/* doc02.querySelector("#userid").onchange = e => {
const input = e.target
const len = input.value.length
if (len < 4 || len > 15) {
input.setCustomValidity('4~15자리의 영문과 숫자로 입력')
} else { // 정상적인 경우에는 validation 에러 메시지를 비운다
input.setCustomValidity('')
}
input.reportValidity()
} */
// 이메일 입력도 변화가 일어날 때마다 validity 검사를 하고 결과를 보여주기 원하면
doc02.querySelector("#email").onchange = e => {
const input = e.target
input.checkValidity() // 검사를 하고
input.reportValidity() // 검사 결과를 보여주자
}
doc02.querySelector("#userpw").onchange = e => { /*
const input = e.target
const len = input.value.length
if (len < 8) {
input.setCustomValidity('8자리 이상')
} else { // 정상적인 경우에는 validation 에러 메시지를 비운다
input.setCustomValidity('')
}
input.reportValidity() */
}
doc02.querySelector("#userpw2").onchange = e => { /*
const pw1 = doc02.querySelector("#userpw") // 첫번째 비밀먼호 input
const pw2 = e.target
if (pw1.value === pw2.value) { // 정상적인 경우에는 validation 에러 메시지를 비운다
input.setCustomValidity('')
} else { // 패스워드가 같지 않으면
input.setCustomValidity('비밀번호가 다릅니다')
}
input.reportValidity() */
}
doc02 = html`
<form method="post" action="https://postman-echo.com/post" target="_blank">
<ul>
<li><label>아이디
<input type="text" id="userid" name="userid" required
placeholder="4~15자리의 영문과 숫자로 입력" // 조건 안맞으면 출력해주는 부분
minlength="4" maxlength="15"></label></li>
<li><label>이메일
<input type="email" id="email" name="email" required></label></li>
<li><label>비밀번호
<input type="password" id="userpw" name="userpw" required
placeholder="8자리 이상"></label></li>
<li><label>비밀번호</label>
<input type="password" id="userpw2" required> 확인</li>
</ul>
<button type="submit" id="submit">가입하기</button>
<button type="reset" id="reset">취소</button>
</form>
// required는 양식이 맞족하기 위해서는 빈칸이 모두 채워져 있어야한다.
`
newsForm1 = html`
<form action="https://postman-echo.com/post" method="post" target="_blank">
<fieldset>
<legend>관심 뉴스 분야 선택 (1-4개)</legend>
<label><input name="politics" type="checkbox">정치</label>
<label><input name="economy" type="checkbox">경제</label>
<label><input name="national" type="checkbox">사회</label>
<label><input name="world" type="checkbox">세계</label>
<label><input name="science" type="checkbox">과학/기술</label>
<label><input name="lifestyle" type="checkbox">생활/문화</label>
<label><input name="entertainment" type="checkbox">연예/엔터테인먼트</label>
<label><input name="sports" type="checkbox">스포츠</label>
</fieldset>
<button type="submit">선택</button>
<button type="reset">초기화</button>
<output style="color:red"></output>
</form>
`
checkboxes1 = newsForm1.querySelectorAll('[type="checkbox"]') // 속성 선택자
checkboxes1.forEach( box => console.log(box.name + " " + box.checked) )
Array.from(checkboxes1).filter(b => b.checked).length
output1 = newsForm1.querySelector("output")
newsForm1.onsubmit = (event) => {
event.preventDefault() // submit의 기본 동작이 일어나지 못하도록
const output = newsForm1.querySelector("output")
const count = Array.from( newsForm1.querySelectorAll('[type="checkbox"]') )
.filter(b => b.checked).length
if (count < 1) {
output.textContent = "관심 뉴스를 한 분야 이상 선택해 주세요."
setTimeout( () => output.textContent="", 3000 )
return false;
}
if (count > 4) {
output.textContent = "관심 뉴스는 네 분야까지만 선택 가능합니다."
setTimeout( () => output.textContent="", 3000 )
return false;
}
newsForm1.submit() // 위의 validiation 검사에서 걸리지 않고 통과되면
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
