인프런 커뮤니티 질문&답변
작성한 질문수
회원가입폼 검증 -2 에서 문제가생겼습니다
작성
·
234
0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>회원가입</title>
<meta name="keyword" content="회원가입,html">
</head>
<style>
.alert-message {
margin: 0 10px;
color: #f09090;
font-size: 14px;
font-weight: 900;
}
</style>
<body>
<h1>회원가입</h1>
<hr />
<!--action 비워두면 자기자신한테던진다.-->
<form action="validation.html" methed="POST">
<fieldset>
<legend>계정정보</legend>
<div>
<label for="id-account">아이디</label>
<input type="text" name="account" id="id-account" required="required">
<span class="alert-message" id="id-account-alert">test</span>
</div>
<div>
<label for="id-password">비밀번호</label>
<input type="password" name="password" id="id-password" required="required">
<span class="alert-message">test</span>
</div>
<div>
<label for="id-password2">비밀번호 확인</label>
<input type="password" name="password2" id="id-password2" required="required">
<span class="alert-message">test</span>
</div>
</fieldset>
<fieldset>
<legend>프로필</legend>
<div>
<label for="id-name">이름</label>
<input type="text" name="name" id="id-name" required="required">
<span class="alert-message">test</span>
</div>
<div>
<label>생년월일</label>
<!--required submit에 가입하기 중단시키는 역할-->
<input type="number" name="birth-year" placeholder="년" min="1900" max="2222" required="required">
<select name="birth-month" id="" required="required">
<option value="">월</option>
<option value="1">1월</option>
<option value="2">2월</option>
<option value="3">3월</option>
<option value="4">4월</option>
<option value="5">5월</option>
<option value="6">6월</option>
<option value="7">7월</option>
<option value="8">8월</option>
<option value="9">9월</option>
<option value="10">10월</option>
<option value="11">11월</option>
<option value="12">12월</option>
</select>
<input type="number" name="birth-day" placeholder="일" min="1" max="31" required="required">
<span class="alert-message">test</span>
</div>
<div>
<label>성별</label>
<input type="radio" name="gender" id="id-gender-male" required="required" value="male">
<label for="id-gender-male">남자</label>
<input type="radio" name="gender" id="id-gender-female" required="required" value="female">
<label for="id-gender-female">여자</label>
<input type="radio" name="gender" id="id-unknown" required="required" value="unknown">
<label for="id-unknown">기타</label>
<span class="alert-message">test</span>
</div>
</fieldset>
<div>
<input type="checkbox" name="agree" id="id-agree" required="required">
<label for="id-agree">사이트 이용약관과 개인정보 수집 방침에 동의합니다.</label>
</div>
<!--<input type="submit" value="가입하기">-->
<button type="submit">가입하기</button>
</form>
<script type="text/javascript" src="scripts/validation.js"></script>
</body>
</html>
window.addEventListener('load',function(){
clearMessages();
var formElem=document.querySelector('form');
formElem.onsubmit=submitForm;
});
function clearMessages(){
var messages=document.getElementsByClassName('alert-message');
for (var i=0; i<messages.length;i++){
messages[i].style.display='none';
}
}
function showM(inputElement, message){
var messageEle = inputElement.parentNode.querySelector('span');
messageEle.style.display ='lnline';
messageEle.innerText =message;
inputElement.focus();
}
function submitForm(){
var accountInput=document.querySelector('input[name="account"]');
var passwordInput=document.querySelector('input[name="password"]');
var passwordConfirmInput=document.querySelector('input[name="password2"]');
var selectInput=document.querySelector('select[name="birth-month"]');
var radioInput=document.querySelector('input[name="gender"]:checked');
var checkInput=document.querySelector('input[name="agree"]');
console.log(accountInput.value);
console.log(passwordInput.value);
console.log(passwordConfirmInput.value);
console.log(selectInput.value);
console.log(radioInput.value);
console.log(checkInput.value);
if(accountInput.value.length<6){
showM( accountInput , '아이디는 6글자이상이여야합니다.');
}
return false;
};
'아이디는 6글자이상이여야합니다이라는 오류가 안나와요
답변 1
2
안녕하세요. 락곤님
문의하신 내용 확인해본 결과 validation.js 파일에서 오타가 있는것으로 확인됩니다.
function showM(inputElement, message){
var messageEle = inputElement.parentNode.querySelector('span');
messageEle.style.display ='lnline';
messageEle.innerText =message;
inputElement.focus();
}showM이라는 함수의 3번째줄 messageEle.style.display ='lnline'; 부분에서 lnline이 아니라 inline으로 변경해보시면 되실겁니다!(l -> i)
변경해도 안된다면 다시 문의주시면 감사하겠습니다.
오늘도 즐거운 공부시간 되시길 바라겠습니다. :)