본문으로 건너뛰기

"jquery" 태그로 연결된 13개 게시물개의 게시물이 있습니다.

모든 태그 보기

jQuery Validation과 Materialize의 연동

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

jQuery Validation with Materialize CSS Materialize CSS 와 연동해 사용할 수 있다.

// p 태그를 이용하는 방법
$.validator.setDefaults({
  errorClass: "invalid form-error red-text",
  errorElement: "p",
  errorPlacement: function (error, element) {
    const e = element.get(0);
    if (e.type === "radio" || e.type === "checkbox") {
      const $a = error.appendTo(element.parent());
      $a.css({ "margin-top": "10px" });
    } else {
      error.appendTo(element.parent());
    }
  },
});

// 더 예쁜 방법
$.validator.setDefaults({
  errorClass: "invalid",
  validClass: "valid",
  errorPlacement: function (error, element) {
    const $label = $(element)
      .closest("form")
      .find("label[for='" + element.attr("id") + "']");

    $label.attr("data-error", error.text());
    $label.addClass("active");
  },
});

여담

bootstrap tooltip 을 활용한 validation 처럼 toast 를 활용한 플러그인이 나오면 좋으련만...

jQuery Validation Error Handling 및 focus, target 설정

· 약 2분
Eunkwang Shin
Eunkwang Shin
Owner

기본 기능만으론 checkbox 나 radio 사용시에 첫번째 element 뒤에 글자가 삽입이 되서 위치를 지정해주어야한다.

<script>
  $.validator.setDefaults({
    onfocusout: false,
    invalidHandler: function (form, validator) {
      // 커스텀 포커스 핸들링
      if (validator.numberOfInvalids()) {
        validator.errorList[0].element.focus();
        //alert(validator.errorList[0].message); // 경고창
      }
    },
    errorClass: "text-danger", // 에러 스타일을 입힐 클래스 지정
    errorPlacement: function (error, element) {
      // data-error 속성으로 해당 위치 삽입
      var placement = $(element).data("error");
      if (placement) {
        $(placement).append(error);
      } else {
        // 없을경우 마지막노드 뒤에 삽입
        element.parent().children().last().after(error);
      }
    },
  });
</script>

<!-- data-error 속성 사용 예시 -->
<input type="text" name="id" data-error="#id_error" />
<p id="id_error"></p>

설명

data-error attribute 를 통해 원하는 위치에 에러를 띄울 수 있고, 그렇지 않을 경우 마지막 노드 뒤에 에러를 출력한다.

7 줄에 주석을 지우면 첫번째 오류를 alert 으로 띄울 수 있다.

jQuery DateTimePicker와 Moment JS의 연동

· 약 2분
Eunkwang Shin
Eunkwang Shin
Owner

개발을 하다보면 datetime 이 같이 필요한 경우가 생긴다. pickadate 를 사용해 date 와 time picker 를 모두 사용해 만들 수도 있지만 datetimepicker가 편하고 쉽다.

설치​

# datetimepicker
$ bower install https://github.com/xdan/datetimepicker.git --save
# moment
$ bower install moment --save

예제​

<link
  rel="stylesheet"
  type="text/css"
  href="/bower_components/datetimepicker/build/jquery.datetimepicker.min.css"
/>
<!-- php.date.formatter.js 와 jquery.mousewheeel.js 를 포함하는 full.js-->
<!-- moment는 이미 선언되어있다고 가정합니다 -->
<script src="/bower_components/datetimepicker/build/jquery.datetimepicker.full.min.js"></script>

<script>
  // dateTimePicker localization
  $.datetimepicker.setLocale("ko");
  // dateTimePicker moment.js와 연동
  $.datetimepicker.setDateFormatter({
    parseDate: function (date, format) {
      var d = moment(date, format);
      return d.isValid() ? d.toDate() : false;
    },

    formatDate: function (date, format) {
      return moment(date).format(format);
    },
  });

  $(function () {
    // datetimepicker init
    $(".datetimepicker").datetimepicker({
      format: "YYYY-MM-DD HH:mm:ss",
      formatTime: "HH:mm",
      formatDate: "YYYY-MM-DD",
    });
  });
</script>

<input type="text" name="startDate" class="datetimepicker" /> ~
<input type="text" name="endDate" class="datetimepicker" />

여담​

pickadate 에서 datetime 을 같이 지원해주는 모듈도 만들어주면 얼마나 좋을까?