[jQuery] 제이쿼리를 이용한 유효성 검사

jQuery

입력 받을 때 입력 항목에 대해서 모두 입력을 받았나에 대한 검사가 필요하다

addNewMovie.jsp에 addNewMovie버튼을 눌렀을 시 추가될 수 있게 jQuery를 작성한다
addNewMovie 버튼을 눌렀을 때 폼의 값들을 가져와 처리를 하기 때문에 폼 처리를 먼저 한다

# MovieTitle Check
이제 요소 체크를 진행한다
먼저 영화제목을 가져오는데 var 변수에 폼값을 가져온다
그러나 .text로 받아올 수 없다
input으로 받아온 것은 val로 받아와야 한다

잘못된 형식

val로 받아와 공백인 것을 확인한 후 공백인 경우 return을 통해 재입력을 받게 한다

그런데 만약에 "   " 와 같이 공백이 들어가 있다면 밑의 if절에 걸리게 되지 않는다
그렇기 때문에 공백도 처리를 해줘야한다
그런데 "   a    b    " 이라고 입력이 된다면 1,2,3번 공백중에 필요가 없는 경우는
        1    2    3
1, 3번 공백이 될 것이다 문자 사이에 공백은 유효한 값이 될 수도 있기 때문이다
사이드 공백을 제거하기 위해 다음과 같이 작성을 하면 사이드에 공백이 모두 제거된다

# Rate Check
위와 같은 방식으로 다른 항목들도 같은 형식으로 체크를 하면 된다

하지만 평점은 실수 인지와 숫자인지를 검사하는 과정이 필요하다
NaN (Not a Number)을 이용해서 거르면 된다
숫자가 아닌경우를 찾아낸다

위와 같이 작성했다면 숫자가 아닌 값을 입력했을 때 논리값이 나올 것이다
숫자인 경우 false, 문자인 경우 true가 나올 것이다

또한 입력된 값을 alert 시킬 수도 있다

위와 같이 입력된 값이 나오게 된다
그런데 Int로 바꾸게 되면 소수점을 입력 시 짤리게 되는 것을 볼 수 있는데
parseFloat으로 하면 된다
그런데 parse시 문자가 입력되었다면 NaN 값이 나온다
그것을 이용해서 문자도 거를 수 있게 된다

# Tips 이퀄 개수의 차이
이퀄을 == 두개 쓰는 경우와 === 세개 쓰는 경우가 다르다
== 두개는 들어있는 값만 같을 때 true가 나오나 ===을 사용한다면 들어있는 값의 타입까지 같아야 true가 나오게 된다

# 상영시간 Check
상영시간은 시간:분 단위로 입력받는 형식이 같다
그러면 거르는 과정도 우리가 제한을 해줘야하는데 그러한 것은 정규표현식을 사용하는 것이 편하다

우선 입력받았는지 부터 검사를 진행한다

그리고 나서 글자 크기를 비교해서 시:분 으로 최대 크기를 벗어나지 않았나부터 검사를 진행한다

한글이던 영어던간에 1글자를 1로 본다
한글이 5 글자여도 정확하게 넘어간다
그렇기 때문에 이제 정규표현식을 생성해서 비교를 해준다

[0-9]까지 숫자 중  1~2개를 입력할 수 있고 특수문자 : 와 [0-9]까지 숫자 중 1~2개를 입력

# 개봉일 Check

개봉일은 입력 양식이 주어지기 때문에 값이 입력되었나 안되었나만 확인해보면 된다

# 등급 Check
등급은 위와는 다르게 id가 아닌 class가 사용되었다 (여러 가지 값을 갖기 때문에)
.grade (class명)으로 grade class를 갖는 값들을 가져온다

.grade중에서 checked  즉 선택된 것만 가져온다

전체 관람가는 값이 1이기 때문에 1이 나왔다

15세 관람가를 선택시엔 3이 나온 것을 볼 수 있다

# 장르 Check
위와 같이 라디오 버튼 방식을 이용해서 체크박스인 장르도 사용 할 수 있다

아무것도 선택하지 않았을 시 에러 알림이 뜬다

값들이 선택되었을 땐 순서상 처음의 value 값만 나오게 된다

# 감독 Check
감독은 select 라도 id가 중복되기 때문에 기존의 방식과 똑같이 하면 된다

select에서 감독과 같이 multiple 옵션값이 들어가 있다면 선택을 해도 값이 나오지 않는다
그래서 옵션값을 걸러줘야 한다

Select 박스나 Check 박스는 trim 하는 부분이 없어도 무관하다
선택 옵션 Value가 정해져 있기 때문에 오타 가능성이 없기 때문에
그러나 입력이 안된 경우를 ""로 비교하면 안걸러지고
undefined로 걸러줘야 한다

# 배우 Check
배우도 마찬 가지로 위와 같다

# Tips 모든 입력값들 Check 소스

<script type="text/javascript">
    $(document).ready( function() {
      
        $("#directors").click( function() {
            var selectedDirectors = "";
          
            $("#directors option:selected").each(function(index, data) {
                selectedDirectors += data.text;
                selectedDirectors += " , ";
              
            });
                $("#directorsName").text( selectedDirectors );
        } );
      
        $("#addNewMovie").click( function() {
          
            // MovieTitle Validation Check
            var movieTitle = $("#movieTitle").val();
            movieTitle = $.trim( movieTitle );
            if ( movieTitle == "" ) {
                alert("영화명 재 입력");
                return;
            }
          
          
            // Rate Validation Check
            var rate = $("#rate").val();
            rate = $.trim( rate );
            if ( rate == "" ) {
                alert("평점 재 입력");
                return;
            }
          
          
            rate = parseFloat(rate);
            if ( isNaN(rate) ) {
                alert("평점 올바르게 입력 \n 평점은 소수점 포함 숫자");
                return;
            }
          
            // RunningTime Validation Check
            var runningTime = $("#runningTime").val();
            runningTime = $.trim( runningTime );
            if ( runningTime == "" ) {
                alert("상영 시간 재 입력");
                return;
            }
          
            if ( runningTime.lengh > 5 ) {
                alert("상영시간 올바르게 입력");
                return;
            }
          
            var regExp = new RegExp("^[0-2]{0,1}[0-9]{1}:[0-5][0-9]$");
            var isValidRunningTime = regExp.test(runningTime);
            if ( isValidRunningTime == false ) {
                alert("상영시간을 올바르게 입력");
                return;
            }
          
            // OpenDate Validation Check
            var openDate = $("#openDate").val();
            openDate = $.trim( openDate );
            if ( openDate == "" ) {
                alert("개봉일 재 입력");
                return;
            }
          
            // Grade Validation Check
            var grade = $(".grade:checked").val();
            grade = $.trim( grade );
            if ( grade == "" ) {
                alert("등급 재 입력");
                return;
            }
          
            // Director Validation Check
            var directors = $("#directors option:selected").val();
            directors = $.trim( directors );
            if ( directors == "" ) {
                alert("감독 재 입력");
                return;
            }
          
            // Actor Validation Check
            var actors = $("#actors option:selected").val();
            actors = $.trim( actors );
            if ( actors == "" ) {
                alert("배우 재 입력");
                return;
            }
          
            // Genre Validation Check
            var genres = $(".genres:checked").val();
            genres = $.trim( genres );
            if ( genres == "" ) {
                alert("장르 재 입력");
                return;
            }
          
            // AddNewMovie
            var form = $("#addNewMovieForm")
            form.attr("method", "post");
            form.attr("action", "<c:url value="/addNewMovieAction" />");
          
            form.submit();
          
        } );
      
    } );
</script>

# Tips 미입력 항목 포커스
입력 검사 후 입력이 안된 항목에 지정을 해주면 사용자가 편할 것이다
그것을 해주는 방법

걸러는 과정에서 포커스를 지정해주면 된다
평점을 입력하지 않았을 시 상황이다

알림창 이후 포커스가 평점을 가르키는 것을 볼 수 있다
그러나 체크박스나 라디오버튼은 포커스를 주는게 잘 보이지 않기 때문에
무의미 하다
그렇기 때문에 테이블로 구성시 테이블 색을 다르게 한다거나
뭔가 디자인적으로 표시를 해주면 좋을 것이다

아니라면 Fade In/Out 효과를 주어도 된다

그렇게 되면 라디오 버튼이 Fade 처리되게 된다