인프런 커뮤니티 질문&답변
작성한 질문수
return success
해결된 질문
작성
·
248
0
안녕하세요!
js파일에서 마지막에 리턴값이 false일 때에는 제출하면 화면이 잘 넘어갔는데, success로 변경하고 제출을 하면 404 오류가 나오는 이유가 뭘까요?ㅠㅠ
폼 액션은 변경 했습니다!
답변 5
1
안녕하세요,
김보영님.
올려주신 코드로 테스트 해본 결과 강의에서 처럼 정상적으로 작동합니다.
아마 문제가 되는 부분이
이 부분 인 것같습니다.
action 의 속성으로 있는 validation.html 은
validation.html 페이지로 이동하게 해줍니다.
그래서 만약 오류가 없을 경우에
다시 똑같은 페이지로 로딩이 됩니다.
김보영님께서 실행시키는 파일의 이름이
"validation.html"이 맞는지 확인 부탁드립니다.
혹시 다르다면
form 의 action 속성과
파일의 이름을 동일하게 맞춰주시길 바랍니다!
감사합니다.
0
<html>
<head>
<meta charset="utf-8">
<title>회원가입</title>
<meta name="keywords" content="회원가입, html">
<style>
.alert-message {
margin: 0 10px;
color: #f09090;
font-size: 14px;
font-weight: 900;
}
</style>
</head>
<body>
<h1>회원가입</h1>
<hr>
<form action="validation.html" method="post"> <!-- action에 아무것도 없으면 자기 자신에게 돌아감 -->
<fieldset>
<legend>계정 정보</legend>
<div>
<label for="id-account">아이디</label>
<input type="text" name="account" id="id-account" required="required"> <!--required : 필수값 지정 submit시 검증 및 입력 확인 -->
<span class="alert-message" 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>
<input type="number" name="birth-year" placeholder="년" min="1900" max="2020" required="required">
<select name="birth-month" required="required">
<option>월</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-gender-unknown" required="required" value="unknown"/>
<label for="id-gender-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> <!-- button권장 -->
</form>
<script type="text/javascript" src="scripts/validation.js"></script>
</body>
</html>해당 html 코드입니다! 감사합니다😭
0
안녕하세요,
김보영님.
코드를 첨부해 주셔서 감사합니다.
하지만, html코드 첨부도 부탁드립니다.
js파일은 문제될 부분이 보이지 않기도 하며,
페이지가 엉뚱한 곳으로 가는 것은
아마도 html에서의 form부분,
혹은 파일 경로를 확인해 볼 필요가 있을 것 같습니다.
시원한 답변을 드리지 못해서 죄송합니다만,
HTML코드 첨부도 부탁드리겠습니다.
감사합니다.
0
window.addEventListener('load', function() {
clearMessages();
var formElem = document.querySelector('form');
formElem.onsubmit = submitForm;
//월 추가
var selectInput = document.querySelector('select[name="birth-month"]');
for (var i=1; i<=12; i++) {
var option = document.createElement('option');
option.innerHTML = i + '월';
option.value = i;
selectInput.appendChild(option);
}
});
function clearMessages() {
var messages = document.getElementsByClassName('alert-message');
for (var i=0; i<messages.length; i++) {
messages[i].style.display = 'none';
}
}
function showMessage(inputElement, message) {
var messageElem = inputElement.parentNode.querySelector('span');
messageElem.style.display = 'inline';
messageElem.innerText = message;
inputElement.focus();
}
function submitForm() {
//account info
var accountInput = document.querySelector('input[name="account"]');
var passwordInput = document.querySelector('input[name="password"]');
var passwordConfirmInput = document.querySelector('input[name="password2"]');
//select, radio, checkbox
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);
var success = true;
if(accountInput.value.length < 6) {
showMessage(accountInput, '계정은 6자리 이상이어야 합니다.');
success = false;
}
if(passwordInput.value.length < 10) {
showMessage(passwordInput, '비밀번호는 10자리 이상이어야 합니다.');
success = false;
}
if(passwordConfirmInput.value !== passwordInput.value) {
showMessage(passwordConfirmInput, '비밀번호를 동일하게 입력해주세요');
success = false;
}
return success;
}js파일은 위의 코드처럼 작성하였고, 말씀하신 <form action ="validation.html" method="post"> 또한 변경하였는데도 오류가 발생하네요..ㅠㅠ 혹시 제가 놓친 부분이 있을까요?
0
안녕하세요,
김보영님.
validation.js 파일 중 submitForm 함수의 리턴 값이 return false; 일 경우에는 페이지가 넘어가지만,
return success; 일 경우에는 404에러 페이지가 뜨는 상황이신 것 같습니다.
강의에서 나온 코드를 살펴보면,
submitForm의 리턴값이 false일 경우에는,
계정 값이 6자리 미만이거나,
비밀번호가 10자리 미만이거나,
비밀번호 확인이 동일하지 않을 경우입니다.
이 경우에서는 페이지가 넘어가지 않아야합니다.
또한, success값을 true로 선언하고, 리턴 값을 success로 변경하셨음에도
404페이지가 뜬다면, form의 action 속성이 validation.html 으로 변경 되었는지 확인 부탁드립니다.
<form action = "validation.html" method = "post">
김보영님의 질문을 제대로 이해한 것이 맞는지 모르겠습니다.
코드를 확인 할 수 없어,
정확한 해결책을 드리기는 어렵습니다😓
혹시 위의 답변이 도움이 되지 않았다면,
김보영님이 작성하신 코드도 첨부해 주시길 바라겠습니다.
감사합니다.