jQuery Validation과 Materialize의 연동

작성일 Edited on In ,

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