Form에서 필수입력사항 script로 제어하기.

#form #alert #value.length

 

안녕하세요 Gi_1입니다.

form에서 필수입력값은 html에서 required로 간단하게 제어할 수 있습니다.

 

다만, 수많은 체크박수중 하나이상 체크해야 하는 경우나 최소 3글자 이상 입력받고 싶을 때가 있습니다.

 

 

 

최소 글자수

 

  <form action="">

    <input type="text" id="adm_qna_create_txt">

    <button class="submit_btn">완료</button>

  </form>

  <script>

    $(document).ready(function(){

      $('.submit_btn').click(function() {

        var cont = document.querySelector("#adm_qna_create_txt");

        if(cont.value.length < 3) {

          alert('내용을 최소 3글자 이상 입력해주세요.');

          return false;

      }

      });

    });

  </script>

 

 

input 속성중 minlength 를 이용해서 하여도 됩니다.

 

저는 이 속성을 모른 상태에서 작업을 진행하여서 제이쿼리를 사용하게 됐습니다.ㅠㅠ

minlength의 조건을 만족하지 못할 경우 css 적용방법은 이렇습니다.

 

input:invalid { 

 border: 1px solid #000;

}

 

체크박스 최소 1개이상 체크

 

  <form action="">

    <input type="checkbox" name="account" value="a">

    <input type="checkbox" name="account" value="b">

    <input type="checkbox" name="account" value="c">

    <input type="checkbox" name="account" value="d">

    <button class="submit_btn">완료</button>

  </form>

  <script>

    $(document).ready(function(){

      $('.submit_btn').click(function() {

        if (!$("input[name='account']:checked").val()) {

          alert('선택사항을 체크해주세요.');

            return false;

        }

        else {

        }

      });

    });

  </script>