로그인, onsubmit 사용

확실히 네이버 블로그가 코드 입력했을 때 알록달록하고 예쁘긴 하다 ...

왜 요녀석은 칙칙하지?!

 

<script type="text/javascript">

if (document.fr.id.value==""){
 alert("아이디를 입력하세요")
 document.fr.id.focus();
 return;
}

</script>

 

스크립트를 입력하니까 예뻐졌다.

 

이렇게 하면 아이디 창에 입력 안하면 아이디 입력하라는 문구 뜸

 

근데 구구절절 document..fr..id.... 치기 번거로움?!

 

그래서

 

getElementById <= 이 녀석을 활용해 간소화하는데

폼 태그에서

 

 

<script type="text/javascript">

if (document.getElementById("idd").value==""){
    alert("아이디를 입력하세요");
	document.fr.id.focus();
    return false;
}
</script>

<input type="text" name="id" id="idd"> 새로 id영역을 만들고 임의로 idd를 입력

 

저 idd를 getElementById("idd")에 넣는다

그러면 간단해진다 (?)

보면 return 옆에 false가 붙었다.

이유는 새로 회원가입을 할 수 있는 버튼을 만들었는데 type이 버튼이 아니라 "submit"이다

클릭하면 바로 전송되게 되는데 문제는 

return이 아이디 창에서 끊기고 비밀번호나 다른 걸 입력할 수도 없이 바로 전송되어버린다

 

해결책은

폼 태그에다가 onsubmit이라는 이벤트를 열고 return check() 폼 체크 할 수 있게 함!

 

<form method="post" onsubmit="return check()"> </form>

 

<submit버튼을 누르면 onsubmit이 실행되어

check함수가 실행되고

check함수의 return 값이 true일 경우에만 폼을 전송합니다.

 

onsubmit 이벤트 속성에 들어가는 함수는 반드시

전송해야 할 경우 true를 반환하고

하지말아야 할 경우 false를 반환하는 형식이어야 합니다.>

 

출처 : http://yeom7707.blog.me/90013016215

 

그렇다네요!

그래서 리턴 값 뒤에다가 false를 써준다. ✌

그럼 action이 실행되지 않는다!

 

좀 헷갈리긴 하는데 ;;