[javascript] [aniView] 애니매이션 구현하기

// URL :
https://jjcosgrove.github.io/jquery-aniview/

// 라이브러리 삽입
< script src="https://unpkg.com/jquery-aniview/dist/jquery.aniview.js">< / script >

// 또는 CORS 대응코드
< script src="https://unpkg.com/jquery-aniview@1.0.3/dist/jquery.aniview.js" integrity="sha384-uvboBeyPkVGldyoicVJST1JEAbxI2W0lG2fFOyGvahZrC4jWiv0vmryxw9NXIEn6" crossorigin="anonymous">< /script >

// 실행
$('.aniview').AniView();

// 옵션과 함께 실행
var options = {
animateClass: 'animated',
animateThreshold: 100,
scrollPollInterval: 50
}
$('.aniview').AniView(options);

// 태그에 적용하기 (v3)
< div class="aniview" data-av-animation="slideInRight">< /div>

// 태그에 적용하기 (v4)
< div class="aniview" data-av-animation="animate__jackInTheBox">< /div>

[jquery] validate 폼 경고를 alert()으로 띄우기

$.validator.setDefaults({
    onkeyup: false,
    onclick: false,
    onfocusout: false,
    showErrors: function(errorMap,errorList){
        if(this.numberOfInvalids()){ // 에러가 있으면
            alert(errorList[0].message); // 경고창으로 띄움
        }
    }
});

$("#form-write").validate({
    rules: {
        token: { required: true }
        , ev_name: { required: true }
        , ev_area: { required: true }
        , ev_type: { required: true }
        , ev_sdate: { required: true }
        , ev_edate: { required: true }
        , ev_addr: { required: true }
    },
    messages: {
        token: { required: "토큰이 누락되었습니다." }
        , ev_name: { required: "행사명을 입력하세요." }
        , ev_area: { required: "행사지역을 선택하세요." }
        , ev_type: { required: "행사유형을 선택하세요." }
        , ev_sdate: { required: "행사기간(시작일)을 입력하세요." }
        , ev_edate: { required: "행사기간(종료일)을 입력하세요." }
        , ev_addr: { required: "행사위치를 입력하세요." }
    },
    errorPlacement: function(error,element){
        //error.appendTo(element.closest("div").prev()); // 사용안함
    },
});

validate의 기본 표시방법은 해당 INPUT창의 아래에 오류메세지를 표시하는 방식인데,

전통적인 FORM 체크방식처럼 alert()창을 실행하여 오류메세지를 표시하도록 변경함