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 를 활용한 플러그인이 나오면 좋으련만...