Front/JavaScript & jQuery27 [jQuery] jquery validation 사용 시 submit 막기 상황 jquery validation 라이브러리 사용하여 유효성 검사를 했다. 보통 유효성 검사에 통과하면 서버에 데이터를 보내고 DB에 저장,수정을 하는 로직을 태운다. 기본적인 jquery validation 라이브러리 사용법은 아래 포스팅 참고!👇 2023.02.28 - [Front/JavaScript & jQuery] - [jQuery] 제이쿼리 validation 플러그인으로 쉽게 유효성 검사하기 하지만 이번 요구사항에는 유효성 검사에 통과하면 미리보기처럼 하단에 리스트를 하나씩 차곡차곡 쌓고, 맨 마지막에 [저장] 버튼을 클릭했을 때 쌓아놓은 리스트들을 한꺼번에 DB에 저장하도록 구현해야 했다. 적용 ✔️1. html 파일의 form 태그에 onsubmit="return false;" 추가 ✔.. 2024. 2. 16. [jQuery] Sortable 드래그앤드랍 drag&drop 순서 변경 후 처리하기 상황 목록을 drag&drop을 이용하여 정렬 순서를 변경하는 기능을 구현할 때, 좀 더 쉽게 jQuery-ui 라이브러리 내에 sortable 을 사용할 수 있다. 참고로 drag&drop 기능을 바닐라JS를 사용해서도 구현할 수 있다. 이전 포스팅 참고!👇 2021.12.21 - [Front/JavaScript & jQuery] - [JavaScript] 드래그 앤 드롭, 위 아래로 이동시키기 정렬 기능 구현은 어렵지 않게 했는데, drag&drop으로 정렬을 마친 후에 다른 기능을 수행하려면 어떻게 해야할까? 적용 ✔️정렬을 마치고 DOM의 위치가 변경되었을 때를 감지하는 이벤트를 아래와 같이 추가하면 된다. $( ".dragTable" ).off("sortupdate").on("sortupdate.. 2024. 2. 16. input이 하나인 경우, enter키를 누르면 form submit 되는 현상 막기 상황 form태그 안에 input 태그가 오직 하나인 경우 엔터를 치게 되면 기본적으로 submit이 된다. 의도하지 않은 submit을 막기 위한 방법은 여러가지가 있다. 그 중에 내가 사용한 방법을 정리해보려고 한다. 적용 📌form 태그에 onsubmit="return false;" 를 주어 submit을 막는다. 📌onkeyup에 엔터(keyCode == '13') 인 경우에 실행할 함수를 호출한다. 검색 📌fnSearch() 함수 부분 : 이제 submit 속성을 true로 바꾸어준다. function fnSearch(){ $('#frm').attr("onsubmit", "return true"); $('#frm').submit(); } 2023. 7. 18. [JavaScript & JQuery] 동적으로 생성된 요소에 이벤트 바인딩 상황 프로젝트를 진행하다보면, 페이지가 그려지고 난 후에 ajax 등 비동기 방식을 이용하여 동적으로 요소들을 생성, 추가하는 경우가 있다. (innerHTML이나 jQuery의 append()와 같은 방법 등..) 이런 경우에는 이벤트 바인딩이 되지 않는다. 이미 페이지가 로드되면서 작성한 이벤트 코드가 바인딩 된 상태이기 때문이다. 동적으로 추가된 요소에 이벤트를 바인딩해야 한다면 어떻게 해야 작동할까? 적용 ✔️1. 자바스크립트로 동적 요소 이벤트 바인딩 📌이벤트 버블링을 이용해서 미리 그려져있는 요소에 이벤트를 건다. // 여기에 동적으로 appendChild 동적 추가 동적으로 생성! 동적 추가 위 소스를 간단히 설명하면, [동적 추가] 버튼을 클릭 시 root태그 하위에 h2태그로 감싸진 ht.. 2023. 4. 26. [jQuery] 제이쿼리 validation 플러그인으로 쉽게 유효성 검사하기 jQuery Validation form 입력 데이터의 유효성을 검증하는 것은 아주 중요한 일이다. jQuery에서 제공하는 validate 플러그인은 유효성 검증을 더욱 쉽게 해주도록 도와준다. 사용자 입장에서 form에 데이터를 입력하고 submit을 했을 때, 개발자가 일일히 걸어놓은 유효성 검증을 거쳐 통과못한 경우에 계속해서 alert창이 뜬다면 번거로울 것이다. validate플러그인을 이용하면 사용자가 빠르게 체크할 수 있도록 시각화해주고 onkeyup, onfocusout을 이용하여 실시간 유효성 검사 가능도 가능하다. 이 외에도 다양한 기능을 제공하니 공식문서를 확인하여 참고해야겠다. https://jqueryvalidation.org/ jQuery Validation Plugin | F.. 2023. 2. 28. jQuery를 바닐라 JS(Vanilla JS)로 변환하기 Pure Javascript 상황 프로젝트를 진행하면서 스크립트를 짤 때, 나는 대부분 jQuery를 이용했다. 가독성이 좋고, 편하다는 이유로 순수 자바스크립트로 코드를 작성하는 것을 미루고 있었다. 순수 자바스크립트로 작성하는 비중을 늘리기 위해, jQuery를 바닐라 JS(Pure JS)로 변환해보려고 한다. 적용 ✔️1. 선택자( Selector ) 1) 단순 선택자 DOM 요소를 선택하는 것은 가장 기본적인 요소 중 하나이다. $(selector) -> querySelector() 또는 querySelectorAll() // jQuery(.className모두 선택) $(".className"); //.className의 첫번째 인스턴스 선택 document.querySelector(".className"); //.clas.. 2023. 2. 16. 이전 1 2 3 4 5 다음
