입력폼에서 라디오 버튼에 값을 선택하였는지 안하였는지 체크를 해서 만약 선택하지 않았다면 라디오 버튼으로 화면이 이동되어 체크할 수 있도록 해보자
일단 html에서 라디오버튼은 아래와 같이 설정하였다.
<legend>카테고리</legend> <fieldset> <input type="radio" id="Category1" value="카테고리1" name = "Category"/><label for="Category1">카테고리1</label> <input type="radio" id="Category2" value="카테고리2" name = "Category"/><label for="Category2">카테고리2</label> <input type="radio" id="Category3" value="카테고리3" name = "Category"/><label for="Category3">카테고리3</label> <input type="radio" id="Category4" value="카테고리4" name = "Category"/><label for="Category4">카테고리4</label> </fieldset>
이제 제이쿼리 파일로 아래와 같이 설정하면 된다.
var Category1 = $('#Category1'); if($(':radio[name="Category"]:checked').length < 1){ alert('카테고리를 선택해주세요'); Category1.focus(); event.preventDefault(); }
var Category1은 html에서 id가 Category1인 것을 선언하였고,
[name="Category"]를 html에서 name 부분의 값이다.
Category1.focus() 는 위에 선언한 #Category1 으로 화면의 포커스가 이동하라는 것이다.
event.preventDefault(); 는 return false; 대신 쓴 것이다. 제이쿼리 API로 이후 넣은 코드들에 대한 진행을 중지시키는 것이다.