[Javascript] form onsubmit기능, return false 안되는 오류.

사용자가 input을 작성하고 form을 제출 할 때 ,

일정 조건이 만족되지 않으면 경고문을 띄우고 조건이 만족될때만 페이지가 넘어가게 하고싶었다.

하지만 alert은 띄우지만 결국 페이지는 넘어가버려서 error페이지를 띄우는 상황이 되었다.

내 경우 return 변수를 따로 지정해주니 이 에러가 해결됐다.

 

1. onsubmit 작성 방법

html 코드

<form method="post" action="/doNext">
	<button type="submit" id="submitBtn">
		제출버튼
	</button>
</form>

이런식으로 있다 치자.

form 안에 사용자가 내용을 작성하고, 버튼을 눌러 제출하는 방식이다.

 

하지만 사용자가 필수 input을 채워넣지 않았을때 submit 버튼을 눌러 제출한다면 당연 null 오류가 난다.

 

그럴때 쓰는 방법이 바로 onsubmit이다.

html 코드에 onsubmit="return validationForm();"을 추가해주자

<form method="post" action="/doNext" onsubmit="return validateForm();">
	<button type="submit" id="submitBtn">
		제출합니다^^
	</button>
</form>

그리고 validationForm()을 javascript로 구현을 해주자.

	function validateForm() {
        	if(validCheck<1){
        	alert("한개 이상의 인풋을 입력해주세요");
    	    return false;
	}

그런데 alert이 나와도 결국 submit이 돼서 에러가 떠버린 것................

alert이 떴다는건 if문 안에 들어갔다는 소리인데, return false만 작동이 안되고 페이지가 넘어가버린다.

구글링 해봤더니 preventDefault()같은것도 나와서 다 해봤지만 안됨.

 

 

2. 오류 해결

function validateForm() {
		let resultFlag = true;
		if(validCheck<1){
			alert("한개 이상의 인풋을 입력해주세요");
			resultFlag = false;
        	}
		return resultFlag;
}

결국 이렇게 return할 변수를 따로 정해주고. 

조건을 만족하지 못할 시에 false로 넘김. 그리고 return을 아예 변수로 해준다.

결과 : 잘됨^^ 뭐가 다른거지?

 

+ 이걸로 해결이 안되면 try-catch문을 써보시기 바란다.

catch에 걸려서 alert이 뜰 경우, 어떤 error인지 나오기 때문!

(나의 경우 error에서 preventDefault가 안된다고 떠서 다른 방법으로 빠르게 돌렸다.)

	function validateForm() {
            let resultFlag = true;
            try{
                if(validCheck<1){
                    alert("한개 이상의 인풋을 입력해주세요");
                    resultFlag = false;
                }
            }catch (error) {
                alert( error );
                return false;
            }
            return resultFlag;
        }