preventDefault()를 사용해 선택적 Submit하기

springboot와 thymeleaf mybatis를 사용해 개발중이다.

회원가입 후 지역정보를 설정하지 않은 사람에게 modal창으로 지역정보를 강제적으로 설정하려한다.

datalist를 통해서 option을 통해 입력하게 하고 해당 데이터의 유효성 검사를 마친후 submit event가 작동시

isNotEmpty function을 통해 변수값을 체크하고 유효한 데이터일 경우 submit을 하려고 했다.

 

동작하지 않은 원인은 preventDefault() function은 해당 요소의 기본동작을 하지 못하게 하는 함수이다.

해당 함수를 조건문안에 위치시켜야 했는데 첫 줄에 작성하여서 동작하지 않았다.

조건문 안에 preventDefault()를 넣으니 원하는 대로 동작되었다.

 

변경 전

document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('.alert-custom').style.display = "none";
    let myModal = new bootstrap.Modal(document.getElementById('staticBackdrop'), {})
    myModal.toggle()
});
let hiddenValue;
let inputValue;

document.querySelector('input[list]').addEventListener('input', function(e) {
    document.querySelector('.alert-custom').style.display = "none";
    hiddenValue = null;
    let input = e.target,
        list = input.getAttribute('list'),
        options = document.querySelectorAll('#' + list + ' option'),
        hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden'),
        label = input.value;

    hiddenInput.value = label;
    inputValue = label;

    for(let i = 0; i < options.length; i++) {
        let option = options[i];

        if(option.value === label) {
            hiddenInput.value = option.getAttribute('data');
            hiddenValue = hiddenInput.value;
            console.log("hidden value :" + hiddenValue);
            break;
        }
    }
});

let loginForm = document.getElementById('locationForm');
loginForm.addEventListener('submit', (e)=>{
	e.preventDefault();
    if(isNotEmpty(hiddenValue)){
        hiddenValue = parseInt(hiddenValue);
    }

    let inputPlace = document.getElementById('place');
    inputValue = inputPlace.value;
    if (!isNotEmpty(inputValue) || !isNotEmpty(hiddenValue)) {
        
        document.querySelector('.alert-custom').style.display = "block";
        this.focus();
    } else if(isNotEmpty(inputValue) && Number.isInteger(hiddenValue)) {
        /*e.defaultPrevented;*/
    }
});

function isNotEmpty(str){
    if(typeof str == "undefined" || str == null || str == "")
        return false;
    else
        return true ;
}

 

 

변경 후

let loginForm = document.getElementById('locationForm');
loginForm.addEventListener('submit', (e)=>{

    if(isNotEmpty(hiddenValue)){
        hiddenValue = parseInt(hiddenValue);
    }

    let inputPlace = document.getElementById('place');
    inputValue = inputPlace.value;
    if (!isNotEmpty(inputValue) || !isNotEmpty(hiddenValue)) {
        e.preventDefault();
        document.querySelector('.alert-custom').style.display = "block";
        this.focus();
    } else if(isNotEmpty(inputValue) && Number.isInteger(hiddenValue)) {
        /*e.defaultPrevented;*/
    }
});