[JavaScript][JQuery] input 공백 막기!

팀원과 미니프로젝트로 CRUD을 구현 중에 form submit시 공백을 검사하는 기능을 추가 하고 싶었다.

$("#writeFrm").submit(async function (e) {
  e.preventDefault();
  if (document.getElementById("writeTitle").value == "") {
    e.preventDefault();
    alert("제목을 입력하세요");  
  }
  if (document.getElementById("writeName").value == "") {
    e.preventDefault();
    alert("닉네임을 입력하세요");
  }
  if (document.getElementById("writeText").value == "") {
    e.preventDefault();
    alert("내용을 입력하세요");  
  } else {
    $("#writeFrm").submit(async function (e) {
  e.preventDefault();
     // data 전송 코드들
      // data 전송 코드들
      // data 전송 코드들
      // data 전송 코드들
      // data 전송 코드들
      alert("저장 완료!")
    }
    

라는 코드는 구현 했지만 원래 있던 코드와 합쳐서 넣으려고 하니까 DB에 두번씩 저장이 되는 것이다!

원인은 원래있던 클릭 이벤트 였다.

$("#writeFrm").submit(async function (e) {
  e.preventDefault();

두 번 사용 되니까 두 번 DB에 전송이 되는 것이었다

따라서 두 번 사용되는 것을 하나로 합쳐서 코드를 짜야한다.

if 빈칸일때 false값을 내보내는걸로 하고 하나로 합치면 되었다.

$("#writeFrm").submit(async function (e) {
  e.preventDefault();
  if (document.getElementById("writeTitle").value == "") {
    e.preventDefault();
    alert("제목을 입력하세요");
    return false;
  }
  if (document.getElementById("writeName").value == "") {
    e.preventDefault();
    alert("닉네임을 입력하세요");
    return false;
  }
  if (document.getElementById("writeText").value == "") {
    e.preventDefault();
    alert("내용을 입력하세요");
    return false;
  }
  // data 전송 코드들
  // data 전송 코드들
  // data 전송 코드들
  // data 전송 코드들
  // data 전송 코드들
  alert("저장 완료!")

잘 된다

이상 끝