인풋값 유효성 검증하기

요약

인풋 값 입력시 or 인풋에서 포커스 이동될 시
인풋 값이 적절한지 판단해
제출 버튼을 활성화한다

📌 선수작업

upload페이지 최초 진입 시 제출 버튼 비활성화로 설정한다

<button class="btn btn-danger fixed-btn" id="upload" disabled>
  글올리기
</button>

📌 사용자 입력 값 유효성 검증

---

price 인풋 값 숫자인지 체크

1. 호출 시 가격 인풋에 입력된 값이 숫자인지 체크하여, 맞다면 priceIsNum에 true 저장 후 반환하는 함수

     var priceInput;

     function isNum() {
       const regex = /^[0-9\b ]{0,7}$/;
       var typedText;
       var priceIsNum = false;

       if (!regex.test(priceInput)) {
         console.log('숫자X');
         return priceIsNum;
       }
       // 정규식 만족한다면(입력값 숫자라면)
       console.log('숫자O');
       priceIsNum = true;
       return priceIsNum;
     }

2. price 인풋에 값 입력될 때마다 1) priceInput에 값 입력값 저장 2) 1의 함수로 인풋값 숫자 여부 판단해 가이드 텍스트 띄움

    $('#price').keyup(function () {
       console.log('price keyUped');
       priceInput = $('#price').val();
       console.log(priceInput);
       if (!isNum()) {
         $('#feed-price').css('display', 'block');
         return;
       }
       $('#feed-price').css('display', 'none');
     });

모든 입력값의 유효성 체크하는 함수 작성

  var enableSubmit = false;
  function checkInput() {
    if ($('#price').val().length <= 0) {
      console.log('가격❌');
      return;
    }
    if (!isNum()) {
      console.log('가격 숫자 ❌');
      return;
    }

    if ($('#title').val().length <= 0) {
      console.log('제목❌');
      return;
    }
    if ($('#content').val().length <= 0) {
      console.log('설명❌');
      return;
    }
    if (!document.querySelector('#image').files[0]) {
      console.log('photo❌');
      return;
    }
    console.log('업로드가능🟢');
    enableSubmit = true;
    return enableSubmit;
  }

📌 유효성 체크할 상황에 위 함수 달기

      // 인풋에 포커스 변할 때마다 값 유효성 검증한다
      $('input,textarea').on('blur, keyup', () => {
        console.log('focus, keyup');
        enableSubmitBtn();
      });
      $('#image').change(function () {
        enableSubmitBtn();
      });

📌 제출 버튼 활성화 함수 작성

function enableSubmitBtn() {
  console.log('focus changed');
  if (!checkInput()) {
    console.log('submit 활성 ❌');
    $('#upload').attr('disabled', true);
    return;
  }
  console.log('submit 활성 🟢');
  $('#upload').attr('disabled', false);
}

📌 제출 버튼 누를 시 DB에 데이터 저장

submit 타입에 달린 이벤트는, disabled 상태가 아닐 때만 작동한다.

$('#upload').click(function (e) {
  e.stopPropagation();
  saveDatainDB();
});