[JS] alert 메세지 띄우고 false 시키기

선 결론!

function alert_false(msg, target){
    alert(msg);
    $(target).focus();
    return false;
}

 

웹개발자가 코드를 짜다보면 form 구조를 많이 접하는데,

submit에서 빈칸이 발생하였을 경우 해당 target으로 이동시키면서
return false 시키는 코드를 계속 짜다가 귀찮아서 그냥 함수를 만들었다

 

그러다 보니 매우 편리함

alert img 출처 구글

 

포인트는 div에 tabindex=0을 꼭 넣어주는 것이다

 

tabindex란? 

div는 기본적으로 포커스가 불가, tabindex를 추가하면 해당 div가 포커스 가능해짐!
그 후 키보드 및 마우스 이벤트에 반응되므로 사용자 상호작용이나 접근성 측면에서 중요함

 

 

예시코드는 이러하다

<div class="th">별점</div>
<div class="td rating-wrapper" tabindex="0">
  @for($i=0; $i<5; $i++)
  	<div class="rating"></div>
  @endfor
</div>
<div class="th">내용</div>
<div class="td keyword-wrapper" tabindex="0">
  @for($i=0; $i<count($keywordArr); $i++)
  	<div class="keyword">{{$keywordArr[$i]}}</div>
  @endfor
</div>

$btnSubmit.on("click", function(event){        
    if(rating == 0){
        return alert_false("별점을 선택해주세요.", ".rating-wrapper"); 
    }else{
        $("#rating").val(rating);
    }

    if($(".keyword.active").length == 0 ){
        return alert_false("내용을 입력해주세요.", ".keyword-wrapper"); 
    }
}

 

이렇게 되면 원하는 내용이 입력되지 않을때,

return false를 시킴과 동시에 focus도 이동시키므로 매우 편리하다

return 이미지 출처 구글