Skip to main content

13 posts tagged with "jquery"

View All Tags

jQuery Validation과 Materialize의 연동

· One min read

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 min read

기본 기능만으론 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 min read

Datetimepicker JS with Moment JS

개발을 하다보면 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 을 같이 지원해주는 모듈도 만들어주면 얼마나 좋을까?