[jQuery] jquery validation 사용 시 submit 막기

상황

jquery validation 라이브러리 사용하여 유효성 검사를 했다.
보통 유효성 검사에 통과하면 서버에 데이터를 보내고 DB에 저장,수정을 하는 로직을 태운다.

기본적인 jquery validation 라이브러리 사용법은 아래 포스팅 참고!👇

2023.02.28 - [Front/JavaScript & jQuery] - [jQuery] 제이쿼리 validation 플러그인으로 쉽게 유효성 검사하기

하지만 이번 요구사항에는 유효성 검사에 통과하면
미리보기처럼 하단에 리스트를 하나씩 차곡차곡 쌓고,
맨 마지막에 [저장] 버튼을 클릭했을 때 쌓아놓은 리스트들을 한꺼번에 DB에 저장하도록 구현해야 했다.

 

 

---

적용

 

✔️1.  html 파일의 form 태그에 onsubmit="return false;" 추가

<form id="inputFrm" name="inputFrm" onsubmit="return false;">
</form>

 

 

✔️2.  javascript 구현부

$("#inputFrm").validate({
    rules: {
        // 규칙 정의
    },
    messages: {
       // 규칙 어긋날 시 에러 메시지 정의
    },
    errorPlacement: function(error, element) {

    },
    success : function(label, element) {

    },
});

// form 태그에 추가한 onsubmit="return false;" 때문에 실제로 submit 되진 않고, 유효성 검사만 실행함.
$("#inputFrm").submit(); 
$("#inputFrm").validate();



// 유효성 검증 실패 시, 로직 진행 중단
if(!$("#inputFrm").valid()) {
    return false;
}