[JavaScript] input 태그에 내용을 입력하지 않았을 경우 alert창 띄우기

티스토리 뷰

JavaScript

[JavaScript] input 태그에 내용을 입력하지 않았을 경우 alert창 띄우기

onlog writer 2023. 2. 6. 21:22

레시피 등록 화면을 만든 후

레시피 제목과 내용을 입력하지 않았을 경우 input 태그 밑에 안내문구가 출력되게끔 했다.

( 안내문구 설정은 dto 클래스 안에 NotBlank 어노테이션을 이용해 설정해줬다. )

createForm.html 화면에 띄운 모습 (왼쪽) / Recipe 등록 요청 dto (오른쪽)

이후에 보다 확실한 알림창을 구현하고 싶었고 script를 작성했다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#submit-btn").click(function() {
            if($("#recipeTitle").val().length==0){ 
            	alert("제목을 입력해주세요."); $("#recipeTitle").focus(); return false; }
            if($("#recipeBody").val().length==0) { 
            	alert("내용을 입력해주세요."); $("#recipeBody").focus(); return false; }
            if($("#item-list").val().length==0) { 
            	alert("재료를 입력해주세요."); $("#item-list").focus(); return false; }
        });
    });
</script>

위와 같이 script를 작성 후 실행해보면 제목과 내용을 입력하지 않았을 경우 알림창이 제대로 작동을 한다.

제목은 <input>, 내용은 <textarea> 태그로 만들었기 때문에 요소를 val() 로 지정해서 잘 작동을 한 것 같다.

반면에 <ul>과 <li> 태그로 만든 재료입력 칸은 적용이 되지 않았다.

그래서 구글링한 결과 li 태그를 찾을 때는 .find() 로 찾는다는 답을 얻었다.

변수 = $(".클래스명").find("li").length; // find("li"): li를 태그를 찾는다, length: 갯수를 파악한다.

◎ 수정된 script

$(document).ready(function(){
    $("#submit-btn").click(function(){
        if($("#recipeTitle").val().length==0) { 
        	alert("제목을 입력해주세요."); 
            setTimeout(function (){ $("#recipeTitle").focus();}, 1); return false; }
        if($("#recipeBody").val().length==0) { 
        	alert("내용을 입력해주세요."); $("#recipeBody").focus(); return false; }
        if($("#item-list").find("li").length==0) { 
        	alert("재료를 입력해주세요."); $("#item-list").focus(); return false; }
    });
});

recipeTitle은 focus를 적용했음에도 적용이 잘 되지 않아서 따로 setTimeout 설정을 해주었다.

◎ alert 후 focus 작동을 안하는 경우

일반적으로 유효값 체크를 하고 alert으로 메시지를 띄운 뒤 해당 element로 focus를 가게 만든다.

그런데 IE에서는 alert창을 띄우고 element.focus(); 를 주면 이상하게도 위치는 잡아주는데 input 태그의 커서가 깜빡이지 않는다.

그래서 시도 결과 setTimeout 으로 IE에서도 focus를 잡아줄 수가 있었다.

var title = document.getElementById("title");

if(title.value == '') {
  alert("제목을 입력해주세요.");
  setTimeout(function(){title.focus();}, 1);
  return false;
 }