회원가입폼 검증 -2 에서 문제가생겼습니다
330
락곤
작성한 질문수 13
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)
변경해도 안된다면 다시 문의주시면 감사하겠습니다.
오늘도 즐거운 공부시간 되시길 바라겠습니다. :)
unregistered 이라 뜨며 작동하지 않습니다.
0
51
1
공부한 내용을 블로그에 정리해서 올려도되나요?
0
94
1
sublime text 설치 불가
0
176
1
사진과 본문 내용에 패딩이 40px 들어가 있는데 이유를 모르겠습니다
0
98
1
처음 질문과 옵션 관련 질문입니다.
0
89
1
마지막에 news 관련 질문
0
82
1
태그 닫는 단축키가 뭔가요?
0
169
1
강의에 사용하는 예제 코드 자료 있나요?
0
384
1
회원가입 폼 검증하기 실행이 안됩니다.
0
274
1
이미지랑 아이콘 파일을 어떻게 찾아요?
0
351
1
VS 코드는 절대 경로랑 상대 경로로 상위 문서 접근이 차단되어 있네요
0
475
0
프로젝트 고민 해결이 안되어 다시 올립니다.
0
393
1
프로젝트 고민 다시올립니다.
0
447
1
친구와의 프로젝트 고민
0
420
1
화면 오른쪽 스크롤이 넘어가질 않아요!
0
515
1
학과 설정
0
330
2
card.html 버튼 위치
0
601
1
인스타그램 코드 작성 후 동작을 해보았는데 버튼을 눌러도 넘어가질않네요
0
356
2
carousel의 footer부분에
0
294
1
margin 값에 관한 질문입니다.
0
406
1
function clearMessages() 함수의 원리를 알고싶습니다
0
319
1
removeEventListener
0
235
1
버튼을 눌렀을때 케러셀의 이동
0
809
2
html 파일 올립니다!
0
375
1