개발노예 코드와 일상

그누보드 기본 회원가입폼을 변경해서쓰다가

이번에 반응형으로 모조리 통합하면서 변경하게되었다

앱에서나 여타 사이트처럼 커서가 이동하면 바로바로 처리하도록하려고했고

ajax로 해야하나.. 하다가

플러그인발견!

첨에는 쪼금 난해했지만

일단 js 추가해주고

$.validator.setDefaults({

    onfocusout: function(element) { $(element).valid(); },
    focusInvalid: true,
    focusCleanup: false,
    errorClass: 'form-control-msg',
     errorElement: 'div',
    errorPlacement : function (error, element){ // data-error 속성으로 해당 위치 삽입
        var placement = $(element).data('error');
        if (placement) {
            $(placement).append(error);
        } else { // 없을경우 마지막노드 뒤에 삽입
            element.parent().children().last().after(error);
        }
    },
    highlight: function(element) {
      $(element)
        .closest('.form-group')
        .addClass('has-error');
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element)
        .closest('.form-group')
        //.removeClass('has-error')
        //.addClass('text-success');
    },
});

//폼검사
$('#btn_submit, .form-control').click(function(){

    $("#fregisterform").validate({
        //validation이 끝난 이후의 submit 직전 추가 작업할 부분
        submitHandler: function() {

            if(!$("input:checkbox[id='agree_01']").is(":checked"))
            {
                toastr.error("이용약관을 동의해주세요");

                return false;
            }
            document.getElementById('fregisterform').submit();
        },
        //규칙
        rules: {
            mb_id: {
                required : true,
                remote: {
                    url: "<?php echo G5_BBS_URL?>/ajax.id_chk.php",
                    type: "POST",
                },
                specialchar:true
            },
            mb_name: {
                required : true,
            },

        },
        //규칙체크 실패시 출력될 메시지
        messages : {
            mb_id: {
                required : "아이디를 입력해 주세요.",
                remote : "중복된 아이디입니다.",
                specialchar : "회원아이디는 영문자, 숫자, _ 만 입력하세요."
            },
            mb_name: {
                required : "이름을 입력해 주세요.",
            },

        }
    });   

});

대충 이런느낌?
체크박스는 toastr 도 써주고
ajax로 바로바로 중복검사도 해줄수있더라

기본적으로 사용하는 alert문이 식상하거나 디자인을 맘에안들어하는 고객들이 많더라

아이폰에서 사파리로 열면 이상하게 깨지기도하고..

스위트알터나 이것저것 썻지만 성가시고 

toastr 가 그나마 깔끔하면서 모바일 반응형까지 쓰기 좋았다

사용법도 간다했다

js와 css 추가해주고 

자바스크립트로 체크해서

toastr.error("개인정보 수집 및 이용안내를 동의해주세요");

return false;

끝!