이제 우리는 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를 사용한다면 자바스크립트가 동작하지 않는 환경에서도 접근성을 해치지 않고 얼마든지 밸리데이션이 가능합니다.
그렇다면 자바스크립트가 동작하지 않는 환경에서의 밸리데이션은?
당연히 서버쪽에서 검사를 해줘야 합니다.
자바스크립트는 사용자의 편리함을 위해서 사용해야하지 절대적인 기준이나 방법이되어서는 않됩니다!
명심하세요!
잘 안되는게 있다면 예제를 다운받아서 직접 열어보세요!