https://cdn.connect.airregi.jp/js/common/ezValidation/$.ezValidation.js?20260928-160403

1(function ($) {
2  'use strict'
3  $.fn.ezValidation = function (options) {
4    // 初期設定
5    var inputDom = 'input, select, textarea'
6    var customVali = 'custom-validation'
7    var closeBtnDom = '<span class="close"></span>'
8    var sendInputDelay
9    var $this = $(this)
10
11    // プラグインオプション
12    var settings = $.extend({
13      'event': 'keydown keyup keypress change', // バリデーションを行うイベントを指定
14      'errClass': 'invalid', // エラー時に入力項目に付けるClass名
15      'okClass': 'valid', // 非エラー時に入力項目に付けるClass名
16      'baseDom': 'body', // エラーバルーンの土台を設置するDOM名
17      'positionX': 'left', // エラーバルーン x座標（left or right）
18      'positionY': 'top', // エラーバルーン y座標（top or bottom）
19      'closeButton': true, // バルーンのクローズボタンの有無
20      'fadeSpeed': 100, // エラーバルーン フェードアニメーションの速度（ms）
21      'submit': function (e) {
22        $(e.target).find(inputDom).trigger('validation')
23        if ($(inputDom).hasClass(settings.errClass) === true) {
24          return false
25        }
26      },
27      'defaultValidation': true
28    }, options)
29
30    // jQueryが3.0.0以上の時
31    function isJqv3 () {
32      var jQueryVer = Number($.fn.jquery.replace(/\./g, ''))
33
34      if (jQueryVer >= 300) {
35        return true
36      } else {
37        return false
38      }
39    };
40
41    return this.each(function () {
42      // バリデーション→エラーポップアップ表示
43      function errorMsg (msg, e) {
44        var index = $(e.target).attr('ezv-num')
45        var i
46        var errMsgHtml = ''
47
48        if (msg.length !== 0) {
49          for (i = 0; i < msg.length; i = i + 1) {
50            // HTMLタグを除去してエラーメッセージを作成
51            errMsgHtml = errMsgHtml + '<div>' + msg[i].replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '') + '</div>'
52          }
53          $this.find('#errBalloon' + index).find('.errMsg').html(errMsgHtml)
54          $this.find('#errBalloon' + index).trigger('open')
55        } else {
56          $this.find('#errBalloon' + index).trigger('close')
57        }
58      }
59
60      // 標準バリデーション エラー出力関数
61      function errorMSG (MSG, e) {
62        if ($(e.target).attr('title') === undefined) {
63          return MSG
64        } else {
65          return $(e.target).attr('title')
66        }
67      }
68
69      $(this)
70        // HTML5標準のバリデーションをオフ
71        .attr('novalidate', 'novalidate')
72        // 送信機能
73        .on('submit', function (e) {
74          if (settings.submit(e) === false) {
75            return false
76          }
77        })
78        // 各イベントを一つのイベントへ統一する
79        .on(settings.event, inputDom, function (e) {
80          sendInputDelay = setTimeout(function () {
81            clearTimeout(sendInputDelay)
82            $(e.target)
83              .removeClass(settings.okClass)
84              .trigger('validation')
85          }, 10)
86        })
87        // 入力項目に連番をつける
88        .data('ezv-number', '0')
89
90      $(window).on('resize', function () {
91        $this.trigger('setPosBalloon')
92      })
93
94      // カスタムバリデーション
95      $(this).off('validation').on('validation', inputDom, function (e) {
96        // js-ignoreValidationをクラスに持つDOMは後続のバリデーション処理を無視する
97        if ($(e.target).hasClass('js-ignoreValidation')) {
98          return;
99        }
100
101        var i
102        var arrErrorMsg = []
103        var validationType
104
105        validationType = $(e.target).data(customVali)
106
107        // custom-validationが存在しない時
108        if (validationType !== undefined) {
109          validationType = validationType.replace(/ /g, ',').split(',')
110          validationType.push('defaultValidation')
111        } else {
112          validationType = ['defaultValidation']
113        }
114
115        // balloonの土台作成の関数
116        function balloonPositionSet (e) {
117          var offset
118          var balloonWidth = $(e.target).outerWidth()
119          var balloonHeight = $(e.target).outerHeight()
120          var inputNum
121
122          if ($(e.target).attr('ezv-num') === undefined) {
123            $(e.target).attr('ezv-num', $this.data('ezv-number'))
124            $this.data('ezv-number', Number($this.data('ezv-number')) + 1)
125          }
126          inputNum = $(e.target).attr('ezv-num')
127
128          if ($(e.target).hasClass(settings.okClass) === false) {
129            // 土台座標作成
130            var scrollTop = $(window).scrollTop()
131            offset = $(e.target).offset()
132            // バルーンを右にする
133            if (settings.positionX === 'right') {
134              offset.left = offset.left + balloonWidth
135            }
136            // バルーンを下にする
137            if (settings.positionY === 'bottom') {
138              offset.top = offset.top + balloonHeight
139            }
140
141            // jQuery3以上の場合
142            if (isJqv3()) {
143              offset.top = offset.top - scrollTop
144            }
145
146            // DOM生成
147            if (!$this.find('#errBalloon' + inputNum)[0]) {
148              // バルーンのクローズボタンの有無
149              if (settings.closeButton === false) {
150                closeBtnDom = ''
151              }
152
153              // balloonのDOMを生成
154              $(settings.baseDom).append('<div id="errBalloon' + inputNum + '" class="errBalloon"><span class="balloon"><span class="errMsg"></span>' + closeBtnDom + '</span></div>')
155              $this.find('#errBalloon' + inputNum)
156                .stop().fadeTo(0, 0, function () {
157                  $(this).find('.balloon').hide()
158                })
159                // balloonの閉じるボタンにイベントを設定
160                .on('click', '.close', function () {
161                  $(this).parents('.errBalloon').trigger('close')
162                })
163                // balloonのクローズ機能（イベントドリブン）
164                .on('close', function () {
165                  $(this).stop().fadeTo(settings.fadeSpeed, 0, function () {
166                    $(this).remove()
167                  })
168                })
169                // balloonのオープン機能（イベントドリブン）
170                .on('open', function () {
171                  $(this).find('.balloon').show()
172                  $(this).stop().fadeTo(settings.fadeSpeed, 1)
173                })
174            }
175          }
176
177          // 親要素がない吹き出しを削除
178          $('.errBalloon').each(function () {
179            var targetNumer = $(this).attr('id').replace(/errBalloon/g, '')
180            if ($('[ezv-num=' + targetNumer + ']')[0] === undefined) {
181              $(this).remove()
182            }
183          })
184
185          // balloonの位置を設定
186          $this.find('#errBalloon' + inputNum)
187            .offset(offset)
188            .addClass(settings.positionX)
189            .addClass(settings.positionY)
190        }
191
192        // balloonの土台作成の関数を呼ぶ
193        balloonPositionSet(e)
194        $this.on('setPosBalloon', function () {
195          balloonPositionSet(e)
196        })
197
198        // エラー状態をinputにclassで反映
199        $(e.target).removeClass(settings.errClass).removeClass(settings.okClass)
200
201        for (i = 0; i < validationType.length; i = i + 1) {
202          if ($.validationRule[validationType[i]] !== undefined && $.validationRule[validationType[i]](e) !== false && $.validationRule[validationType[i]](e) !== undefined) {
203            if ($(e.target).prop('disabled') === false) {
204              $(e.target).addClass(settings.errClass)
205              // エラーメッセージ呼び出し
206              arrErrorMsg.push($.validationRule[validationType[i]](e))
207            }
208          }
209        }
210        errorMsg(arrErrorMsg, e)
211
212        // ラジオボタン用の処理
213        // ラジオボタンに付与された「js-onError」クラスの有無によりエラー状態を反映
214        if ($(e.target).hasClass('js-onError') === true) {
215          $(e.target).addClass(settings.errClass);
216        }
217
218        // エラーの無い物には 非エラーのClassを追加
219        if ($(e.target).hasClass(settings.errClass) === false) {
220          $(e.target).addClass(settings.okClass)
221        }
222      })
223
224      // HTML5 標準バリデーション
225      $.validationRule = $.extend($.validationRule, {
226        defaultValidation: function (e) {

227          var validityValid
228          var pattern
229
230          if ($(e.target).attr('required') === 'required' && $(e.target).val() === '' || $(e.target).val().match(/^[ 　\r\n\t]+$/)) {
231            var retunMessage = '入力してください'
232            if (e.target.nodeName === 'SELECT') {
233              retunMessage = '選択してください'
234            }
235            return retunMessage
236          }
237          // pattern
238          if ($(e.target).attr('pattern') !== undefined) {
239            pattern = new RegExp($(e.target).attr('pattern'), 'g')
240            if (!$(e.target).val().match(pattern) && $(e.target).val() !== '') {
241              return errorMSG('指定されている形式で入力してください', e)
242            }
243          }
244          if (settings.defaultValidation === true) {
245            // type=email
246            if (e.target.type === 'email') {
247              if ($(e.target).val().match(/.+@.+\..+$/) === null && $(e.target).val() !== '') {
248                return errorMSG('メールアドレスを入力してください', e)
249              }
250            }
251            // type=url
252            if (e.target.type === 'url') {
253              if ($(e.target).val().match(/^[a-z]+:.+/) === null && $(e.target).val() !== '') {
254                return errorMSG('URLを入力してください', e)
255              }
256            }
257            // ブラウザ標準のバリデーション結果を取得
258            if (typeof (e.target.validity) !== 'undefined') {
259              validityValid = e.target.validity.valid
260            } else {
261              validityValid = true
262            }
263            if (validityValid === false) {
264              return errorMSG('指定されている形式で入力してください', e)
265            }
266          }
267          return false
268        }
269      })
270    })
271  }
272}(jQuery))