SpringBoot 빈칸일 경우 경고메세지

Js를 사용해서 구현합니다.

 

먼저 css에서

body > .form > .warning {
    visibility: hidden;
}

body > .form > .warning.visible {
    color: rgb(231, 76, 60);
    margin-top: 0.375rem;
    display: block;
    visibility: visible;
}

visible 클래스가 없을때는 해당 태그를 숨겨둡니다.

하단에 visible 클래스가 추가 될 경우의 속성을 정의해 줍니다.

 

js 

const form = window.document.getElementById("form");
const warning = window.document.getElementById("warning");

form.onsubmit = () => {
    if(form['name'].value === '') {
        warning.innerText = '이름을 입력해주세요.';
        warning.classList.add('visible');
        form['name'].focus();
        return false;
    }

    if(form['text'].value === '') {
        warning.innerText = '내용을 입력해주세요.';
        warning.classList.add('visible');
        form['text'].focus();
        return false;
    }

};

각각 name 칸과 text칸이 비어있을 경우에 대한 메소드입니다.

 

동작 과정

==>  name 또는 text가 비어져있는 상태로 onsubmit 동작이 실행된다면  warning에 visible 클래스를 추가해준다.

         visible 클래스가 warning에 추가 된다면 index.css에서 body > .form > .warning.visible가 수행 되어서 경고 메세지가           보이게 된다. script에   ""defer""를 주의!!!!