jQuery 폼 컨트롤 하기

2013. 2. 18. 21:03개발이야기/호랑이와 jQuery

이제 우리는 jquery를 사용하여 html 문서의 요소들중 하나를 선택해서 컨트롤 할 수 있게 되었습니다.
.hide() 메소드를 사용해서 요소를 숨기는걸 실제로 해봤지요.
hide뿐만 아니라 다른 여러 메소드들을 사용해서 html문서를 떡 주무르듯이 주무를 수 있게 되었습니다.
그렇다면 hide뿐만이 아니라 다른 메소드들을 어떤게 있을까요?

간단합니다. http://api.jquery.com/ 에 접속하면 jQuery에서 사용 할 수 있는 모든 메소드들을 친절하게 예제와 함께 알려주고 있습니다.
당연히 수많은 메소드들을 한번에 외울 수는 없을꺼에요.
필요한 상황에 따라서 인터넷에서 검색을 해본다던지, http://api.jquery.com에 가서 직접 검색을 해보면 찾을 수 있을꺼에요.
그럼 이글을 왜 쓰고 있느냐.. 수많은 api를 검색하기 전에 많이 쓰이는 위주로 빠르게 알려드리기 위한 친절함입니다.

이제 원리는 적당히 이해했으니 바로 실전으로 넘어가서 실무에서 많이 쓰이는 폼 컨트롤을 해보도록 하겠습니다.
일단 가지고 놀 폼을 하나 만들어 보도록 하겠습니다.

<form name="form" action="example.html">
	<input type="text" id="id" value="" name="id">
	<input type="password" id="password" value="" name="password">
	<input type="submit">
</form>

지금 까지는 자바스크립트로 html요소에 접근하기 위해 다음과 같은 코드를 이용했을겁니다.

var id = document.getElementById("id");
var id = document.forms........

바로 앞 포스트를 보았다면 이제 다음과 같이 줄일 수 있겠죠.

var id = $('#id');

이제 input필드의 값을 확인하기 위한 코드는 다음과 같이 사용할 수 있습니다.

var id = document.getElementById("id").value

는 다음코드로 대치합니다.

var id = $('#id').attr('value');

어때요 간단하죠?

위 코드에서 attr메소드는 무엇을 하는놈일까요?
바로 선택된 요소의 속성의 값을 가지고 옵니다. 즉 id가 id인 요소의 value의 value를 가지고 옵니다.
굉장히 많이 쓰이게 되는것중 하나이고, 값을 넣기 위해선 .attr('값을넣을속성','값')으로 넣을 수 있습니다. 다음과 같이 말이죠.

$('#id').attr('value','id');

이 간단한 방법을 가지고 간단한 폼 밸리데이션을 만들어 보도록 하겠습니다.

$(document).ready(function(){ //DOM이 준비되고
	$(form).submit(function(){ //문서의 모든 form이 submit될때
		if(!$('#id').attr('value') || !$('#password').attr('value')){ // id가 id인 요소의 vlue 또는 id가 password인 value가 없다면
			alert('password'); // password라고 경고
			return false; // 폼은 전송시키지않고 false반환
		}
	});
});

지금까지 form onsubmit=""에 함수를 연결해서 사용했다면 지금 같은 방법으로 바꾸는걸 추천합니다.
action을 명시한채로 이렇게 jQuery를 사용한다면 자바스크립트가 동작하지 않는 환경에서도 접근성을 해치지 않고 얼마든지 밸리데이션이 가능합니다.
그렇다면 자바스크립트가 동작하지 않는 환경에서의 밸리데이션은?

당연히 서버쪽에서 검사를 해줘야 합니다.
자바스크립트는 사용자의 편리함을 위해서 사용해야하지 절대적인 기준이나 방법이되어서는 않됩니다!
명심하세요!

잘 안되는게 있다면 예제를 다운받아서 직접 열어보세요!

example04.zip
다운로드

'개발이야기 > 호랑이와 jQuery' 카테고리의 다른 글

jQuery 숨기고 보이는 레이어  (9) 2013.12.11
jQuery 폼 컨트롤 하기  (12) 2013.02.18
jQuery 요소를 컨트롤 하기  (0) 2013.02.16
jQuery ready와 load의 차이  (19) 2013.02.16
jQuery 시작하기  (0) 2013.02.15
  • 좋아요2013.10.17 10:52

    우연히 검색타고 들어왔다가 너무 잘보고 갑니다. 설명을 쉽게 잘해주셔서 이해가 잘되네요.. 그런데... 4개의 글밖에없어 아쉬워요.ㅜㅜ

  • 유란2013.11.19 18:22

    정말 잘 보고 갑니다.

    글솜씨가 탐나게 매력적이시네요.

    눈에 쏙쏙~0.0

  • guk2014.01.02 17:11

    자세한 설명 잘 보았습니다.
    테스트를 해 보았는데, 전 alert 창이 안뜨네요. 뭐가 잘 못 되었을까요?

    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    $(document).ready(function(){
    $(form).submit(function(){ if(!$('#id').attr('value') || !$('#password').attr('value')){
    alert('password');
    return false;
    }
    });
    });
    </script>
    </head>
    <body>
    <form name="form" action="example.html">
    <input id="id" value="" name="id" type="text">
    <input id="password" value="" name="password" type="password">
    <input type="submit">
    </form>
    </body>
    </html>

    • guk2014.01.02 17:13

      원인 찾았습니다.
      아래 처럼 하니 되네요.

      그런데, 값을 다 입력했는데, 경고창이 계속 뜨네요.

      <html>
      <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
      </script>
      <script>
      $(document).ready(function(){
      $(form).submit(function(){ if(!$('#id').attr('value') || !$('#password').attr('value')){
      alert('password');
      return false;
      }
      });
      });
      </script>
      </head>
      <body>
      <form name="form" action="example.html">
      <input id="id" value="" name="id" type="text">
      <input id="password" value="" name="password" type="password">
      <input type="submit">
      </form>
      </body>
      </html>

    • Juni72014.03.08 00:23

      if(!$('#id').attr('value') || !$('#password').attr('value'))
      위 부분을
      if(!$('#id').val() || !$('#password').val())
      로 바꿔보세요

    • 사용자 오중호랑이2014.03.09 21:12 신고

      대리 답변 감사합니다 :)

    • 유분수2014.10.10 01:02

      궁금한게 있는데,
      attr('value')와 val()의 차이점이 무엇이길래 이렇게 코딩해야 하나요?

      둘다 리턴값으로 False / True 이 아닌 다른 타입을 리턴하나요?

    • 사용자 오중호랑이2016.07.12 13:53 신고

      .att('value')는 DOM생성시점 요소의 속성(attribute)값중 value를 get하는거고,
      .val()은 그 이후 변경된 시점의 value를 가져옵니다.
      즉 위 포스트는 (...)

  • 대박2014.09.19 11:34

    잘보고갑니다!!! 도움 감사해요~~

  • 감사용2017.05.05 22:40

    감사합니다. 잘보고 갑니다.