jQuery Validation과 Materialize의 연동

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

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// p 태그를 이용하는 방법
$.validator.setDefaults({
errorClass: 'invalid form-error red-text',
errorElement: 'p',
errorPlacement: function (error, element) {
var e = element.get(0);
if (e.type === 'radio' || e.type === 'checkbox') {
var $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) {
var $label = $(element)
.closest('form')
.find("label[for='" + element.attr('id') + "']");

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

여담

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