[JAVA 개발] jquery(제이쿼리) focus를 이용한 회원가입 폼

회원가입 폼을 만들때 필수 입력사항을 등록하지 않고 회원가입을 할경우 jquery를 통해 입력사항을 확인해

필수사항중 입력되지 않은 폼값으로 포커스를 이동시켜주는 이벤트 동작을 해보겠습니다.

Controller는 생략하도록 하겠습니다.ㅎㅎ

jsp페이지 / 스크립트코드만 작성하면 간단한 샘플이 완성 됩니다.

1. 스크립트 코드

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
 $(function(){
  //id="btn" 클릭시
  $("#btn").click(function(){
   //id="text1"이 공백일경우
   if($('#text1').val()==""){
    //얼럿으로처리
    alert("텍스트1번을 입력해주세요");
    //id="text1"인 곳으로 커서를 이동
    $('#text1').focus();
    return;
   }
   if($('#text2').val()==""){
    alert("텍스트2번을 입력해주세요");
    $('#text2').focus();
    return;
   }
   //둘다 입력이 되었을경우 버튼 클릭시.
   alert("둘다입력완료!!");
  });
 });
</script>

2. html코드

<font color="red">!</font>표시는 필수 입력사항 입니다.
 <table border=1>
  <tr>
   <td><font color="red">!</font>아이디</td>
   <td><input type="text" id="text1" /><br/></td>
  </tr>
  <tr>
   <td><font color="red">!</font>이름</td>
   <td><input type="text" id="text2" /></td>
  </tr>
  <tr>
   <td colspan="2" align="center">
    <input type="button" id="btn" value="등록" />
   </td>
  </tr>
 </table> 

실행화면을 보면 아이디를 텍스트1 , 이름을 텍스트2라고 봤을때 아무런 입력을 하지 않은 상태에서 등록을

누르게 되면 얼럿창이 뜨게되며 얼럿창 확인을 클릭하면 아이디텍스트 입력창에 포커스가 이동됩니다. 

 아이디란에 텍스트 입력후 등록을 누르면 이름(텍스트2)를 입력하라는 얼럿이 뜨고 확인을

누르게 되면 이름 텍스트 입력란에 포커스가 이동됩니다.

아이디와 이름을 입력하고 등록을 눌르게 되면 둘다입력완료 얼럿이 뜨게 됩니다. 

감사합니다.