라디오버튼 유효성 체크

입력폼에서 라디오 버튼에 값을 선택하였는지 안하였는지 체크를 해서 만약 선택하지 않았다면 라디오 버튼으로 화면이 이동되어 체크할 수 있도록 해보자

일단 html에서 라디오버튼은 아래와 같이 설정하였다.

1 2 3 4 5 6 7

<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>

 이제 제이쿼리 파일로 아래와 같이 설정하면 된다.

1 2 3 4 5 6 7

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로 이후 넣은 코드들에 대한 진행을 중지시키는 것이다.

if ($("input[name='school_type1']:checked").length < 1){

alert("고등학교명을 입력해 주세요");

return false;

}