https://vivi-water.jp/wp/wp-content/themes/vivi-water-jp/assets/tf-mw-wp-form/tf-mw-wp-form.js?ver=1.1.9

1jQuery(function($) {
2  var CLASS_REQUIRED = 'tf-required';
3  var CLASS_KATAKANA = 'tf-katakana';
4  var CLASS_TEL = 'tf-tel';
5  var CLASS_ZIPCODE = 'tf-zipcode';
6  var CLASS_FILLED = 'tf-filled';
7  var CLASS_IGNORE = 'tf-ignore';
8  var CLASS_AUTOKANA = 'tf-autokana';
9  var CLASS_AUTOKANA_KATAKANA = 'tf-autokana-katakana';
10  var CLASS_AJAXZIP3 = 'tf-ajaxzip3';
11  var CLASS_INPUT_ERROR = 'tf-input-error';
12  var CLASS_REQUIRE_COUNTER_TOTAL = 'tf-require-counter-total';
13  var CLASS_REQUIRE_COUNTER_REMAIN = 'tf-require-counter-remain';
14  var CLASS_ERROR_ANCHOR = 'tf-error-anchor';
15  var DATA_AUTOKANA = 'data-autokana';
16  var DATA_ONKEYUP = 'data-onkeyup';
17
18
19  /******************************************************
20   * ファイルフィールド用クラス
21   ******************************************************/
22  function TfMwwpformField($field, $form) {
23    this.$form = $form;
24    this.$field = $field;
25    this.rawName = this.$field.attr('name');
26    this.name = this._normalizeName(this.rawName);
27  }
28  TfMwwpformField.prototype = {
29    getField: function() {
30      return this.$field;
31    },
32    getName: function() {
33      return this.name;
34    },
35    getRawName: function() {
36      return this.rawName;
37    },
38    isEmpty: function() {
39      return this.$field.val() === '';
40    },
41    _normalizeName: function(name) {
42      return (new RegExp('([^\\[]*)(\\[(.*)\\])*$')).exec(name)[1];
43    }
44  }
45
46  /******************************************************
47   * チェックボックス + ラジオボタン用クラス
48   ******************************************************/
49  function TfMwwpformMultiField($field, $form) {
50    this.$form = $form;
51    this.$field = $field;
52    this.rawName = this.$field.attr('name');
53    this.name = this._normalizeName(this.rawName);
54  }
55  TfMwwpformMultiField.prototype = $.extend(TfMwwpformMultiField.prototype, TfMwwpformField.prototype);
56  TfMwwpformMultiField.prototype.isEmpty = function() {
57    var name = this.rawName;
58
59    var $related = this.$form.find('[name="' + name +'"]');
60    var isEmpty = true;
61    $related.each(function() {
62      if ($(this).is(':checked')) {
63        isEmpty = false;
64        return false;
65      }
66    });
67    return isEmpty;
68  };
69
70  /******************************************************
71   * ファイルフィールド用クラス
72   * 
73   * MW WP Formの仕様
74   * ・ファイルフィールドのバツボタンを押すとinputが一度削除され、再度追加される
75   * ・確認画面の時点でファイルはアップロードされる
76   * ・確認画面から入力画面に戻った時、アップロードしたファイルのURLがinput[type="hidden"]に設置される
77   * ・確認画面から入力画面に戻った時、input[type="file"]の方は空になる
78   * ・input[type="file"]もinput[type="hidden"]もname属性は同じものが使用される
79   ******************************************************/
80  function TfMwwpformFileField($field) {
81    this.deleteButton = $field.next();
82    this.rawName = $field.attr('name');
83    this.name = this.rawName;
84  }
85  TfMwwpformFileField.prototype = $.extend(TfMwwpformFileField.prototype, TfMwwpformField.prototype);
86  TfMwwpformFileField.prototype.getField = function() {
87    return this.deleteButton.prev();
88  };
89  TfMwwpformFileField.prototype.isEmpty = function() {
90    var $fileField = this.getField();
91    var $hiddenField = this._getHiddenField();
92    return $fileField.val() === '' && !($hiddenField.length && $hiddenField.val());
93  };
94  TfMwwpformFileField.prototype._getHiddenField = function() {
95    return this.deleteButton.nextAll('.mw-wp-form_file').find('input[type="hidden"]');
96  }
97
98
99  /******************************************************
100   * サブミットボタン用クラス
101   ******************************************************/
102  function TfMwwpformSubmitButton($form) {
103    this.disabledText = '入力が完了していません';
104    this.$submitButtons = $form.find('[type="submit"]');
105    var self = this;
106    this.$submitButtons.each(function() {
107      var $submit = $(this);
108      $submit.data('original-text', self.getCurrentText($submit));
109    });
110  }
111
112  TfMwwpformSubmitButton.prototype = {
113    /**
114     * サブミットボタンを無効化する。
115     */
116    disable: function() {
117      var self = this;
118      this.$submitButtons.each(function() {
119        self.setCurrentText($(this), self.disabledText);
120      });
121      // this.$submitButtons.prop('disabled', true);
122      this.$submitButtons.addClass('disabled');
123    },
124
125    /**
126     * サブミットボタンを有効化する。
127     */
128    enable: function() {
129      var self = this;
130      this.$submitButtons.each(function() {
131        self.setCurrentText($(this), $(this).data('original-text'));
132      });
133      this.$submitButtons.removeClass('disabled');
134    },
135
136    /**
137     * 無効状態で表示するテキストを変更する。
138     * @param {string} text 
139     */
140    setDisabledText: function(text) {
141      this.disabledText = text;
142      var self = this;
143      this.$submitButtons.each(function() {
144        var $submit = $(this);
145        if ($submit.hasClass('disabled') === true) {
146          self.setCurrentText($submit, text);
147        }
148      });
149    },
150
151    /**
152     * クリック時の処理を設定する。
153     */
154    onclick: function(func, caller) {
155      this.$submitButtons.on('click', function() {
156        return func.apply(caller);
157      });
158    },
159
160    /**
161     * ボタンテキストを取得する。
162     * @param {jQuery} $submit 
163     * @returns string
164     */
165    getCurrentText: function($submit) {
166      var tagName = $submit.prop('tagName');
167      if (tagName === 'BUTTON') {
168        return $submit.text();
169      } else if (tagName === 'INPUT') {
170        return $submit.val();
171      }
172    },
173
174    /**
175     * ボタンテキストを変更する。
176     * @param {jQuery} $submit 
177     * @param {string} text
178     */
179    setCurrentText: function($submit, text) {
180      var tagName = $submit.prop('tagName');
181      if (tagName === 'BUTTON') {
182        $submit.text(text);
183      } else if (tagName === 'INPUT') {
184        $submit.val(text);
185      }
186    }
187  }
188
189
190  /******************************************************
191   * 必須項目カウンター用クラス
192   ******************************************************/
193  function TfMwwpformRequireCounter($form, fields, validator) {
194    this.$form = $form;
195    this.validator = validator;
196    this.requiredFields = this.filterRequiredFields(fields);
197  }
198
199  TfMwwpformRequireCounter.prototype = {
200    /**
201     * フィールドのうち、必須項目のフィールドのみを取り出す
202     * @param {TfMwwpformField[]} fields 
203     * @returns jQuery
204     */
205    filterRequiredFields: function(fields) {
206      var requiredFieldMap = {};
207      var requiredFields = [];
208      fields.forEach(function(field) {
209        var $field = field.getField();
210        var name = field.getName();
211        if ($field.hasClass(CLASS_REQUIRED) && requiredFieldMap[name] !== true) {
212          requiredFieldMap[name] = true;
213          requiredFields.push(field);
214        }
215      });
216      return requiredFields;
217    },
218
219    /**
220     * 必須項目のうち、未入力またはエラーのある項目を数える。
221     * 未入力の数を .tf-require-counter-remain クラスを持つ要素に出力する。
222     * 必須項目の総数を .tf-require-counter-total クラスを持つ要素に出力する。
223     */
224    count: function() {
225      var $form = this.$form;

226      var validator = this.validator;
227      var remain = 0;
228      this.requiredFields.forEach(function(field) {
229        if (validator.validate(field, $form) !== true) {
230          remain++;
231        }
232      });
233
234      this.total = this.requiredFields.length;
235      this.remain = remain;
236
237      $form.find('.' + CLASS_REQUIRE_COUNTER_TOTAL).html(this.total);
238      $form.find('.' + CLASS_REQUIRE_COUNTER_REMAIN).html(this.remain);
239    }
240  };
241
242  /******************************************************
243   * エラーメッセージ関連の処理を行うクラス
244   * @param {jQuery} $form 
245   * @param {TfMwwpformField[]} fields 
246   ******************************************************/
247  function TfMwwpformErrorManager($form, fields) {
248    this.$form = $form;
249    this.fieldMap = this.createFieldMap(fields);
250  }
251
252  TfMwwpformErrorManager.prototype = {
253    /**
254     * フィールドとエラーメッセージ表示用要素の対応づけマップを作成する
255     * @param {array} fields 
256     * @returns Object
257     */
258    createFieldMap: function(fields) {
259      var fieldMap = [];
260      var self = this;
261      fields.forEach(function(field) {
262        var $field = field.getField();
263        var name = field.getName();
264        var $errorMessageElement;
265  
266        if (fieldMap[name]) {
267          fieldMap[name].field = fieldMap[name].field.add($field);
268          return;
269        }
270  
271        $errorMessageElement = self.findErrorMessageElement(name);
272        if ($errorMessageElement === null) {
273          $errorMessageElement = self.createErrorMessageElement(field);
274        }
275
276        if (!$errorMessageElement.hasClass('tf-error')) {
277          $errorMessageElement.addClass('tf-error');
278        }
279  
280        fieldMap[name] = {
281          field: $field,
282          errorMessageElement: $errorMessageElement,
283        };
284      });
285      return fieldMap;
286    },
287
288    /**
289     * 指定したフィールド名に対応するエラーメッセージ表示用の要素を取得する
290     * フィールド名には[]を含まないものを使用する
291     * @param {string} name 
292     * @returns jQuery|null
293     */
294    findErrorMessageElement: function(name) {
295      var $errorMessageElement = this.$form.find('.tf-error-' + name);
296      if ($errorMessageElement.length === 0) {
297        return null;
298      }
299      return $errorMessageElement;
300    },
301
302    /**
303     * 指定したフィールドに対応するエラーメッセージ表示用の要素を作成する
304     * @param {TfMwwpformField} field 
305     * @returns jQuery
306     */
307    createErrorMessageElement: function(field) {
308      var name = field.getName();
309      var errorMessageClass = 'tf-error-' + name;
310      var $errorMessageElement = $('<span>');
311      $errorMessageElement.addClass('tf-error');
312      $errorMessageElement.addClass(errorMessageClass);
313      $errorMessageElement.insertAfter(field.getField());
314      $errorMessageElement.hide();
315      return $errorMessageElement;
316    },
317
318    /**
319     * 引数にフィールド名を指定してエラーメッセージを表示する
320     * @param {string} name 
321     * @param {string} errorMessage 
322     */
323    setErrorMessageByName: function(name, errorMessage) {
324      var $field = this.fieldMap[name].field;
325      var $errorMessageElement = this.fieldMap[name].errorMessageElement;
326      $field.addClass(CLASS_INPUT_ERROR);
327      $errorMessageElement.html(errorMessage);
328      $errorMessageElement.show();
329    },
330
331    /**
332     * 引数にフィールドを指定してエラーメッセージを表示する
333     * @param {TfMwwpformField} field 
334     * @param {string} errorMessage 
335     */
336    setErrorMessageByField: function(field, errorMessage) {
337      var name = field.getName();
338      this.setErrorMessageByName(name, errorMessage);
339    },
340
341    /**
342     * 引数にフィールド名を指定してエラーメッセージを消去する
343     * @param {string} name 
344     */
345    clearErrorMessageByName: function(name) {
346      var $field = this.fieldMap[name].field;
347      var $errorMessageElement = this.fieldMap[name]['errorMessageElement'];
348      $field.removeClass(CLASS_INPUT_ERROR);
349      $errorMessageElement.html('');
350      $errorMessageElement.hide();
351    },
352
353    /**
354     * 引数にフィールドを指定してエラーメッセージを消去する
355     * @param {TfMwwpformField}

355 field
356     */
357    clearErrorMessageByField: function(field) {
358      var name = field.getName();
359      this.clearErrorMessageByName(name);
360    },
361  }
362
363
364  /******************************************************
365   * 正常な値が入力されているかどうかのマーカー用クラス
366   * .tf-marker-{name} クラスを持つ要素を設置すると、
367   * {name}に指定したフィールドに正常な値が入力されている場合に .tf-filled クラスが付与される。
368   * .tf-marker-{name} クラスを複数設定することも可能。
369   * その場合は全てのフィールドが入力されている場合のみ .tf-filled クラスが付与される。
370   ******************************************************/
371   function TfMwwpformFillMarker($marker) {
372    this.$marker = $marker;
373    this.fillMap = {};
374  }
375
376  TfMwwpformFillMarker.prototype = {
377    addField: function(field) {
378      this.fillMap[field.getRawName()] = false;
379      this.update();
380    },
381
382    filled: function(field) {
383      this.fillMap[field.getRawName()] = true;
384      this.update();
385    },
386
387    unfilled: function(field) {
388      this.fillMap[field.getRawName()] = false;
389      this.update();
390    },
391
392    isFilledAll: function() {
393      var keys = Object.keys(this.fillMap);
394      var i;
395      for (i = 0; i < keys.length; i++) {
396        if (this.fillMap[keys[i]] === false) return false;
397      }
398      return true;
399    },
400
401    update: function() {
402      this.$marker.toggleClass(CLASS_FILLED, this.isFilledAll());
403    }
404  }
405
406
407  /******************************************************
408   * 入力値チェック用クラス
409   * デフォルトで設定されている入力値チェックは、
410   * 必須チェック、カタカナチェック、電話番号チェック、郵便番号チェック、URLチェック、メールアドレスチェックのみ。
411   * その他のチェックが必要な場合は addRule() で追加する。
412   * 
413   * エラーメッセージはフィールドの次の要素として追加される。
414   * ただし .tf-error-{name} クラスを持つ要素がある場合はその内容を上書きして表示する。
415   ******************************************************/
416  function TfMwwpformValidator() {
417    this.rules = [];
418    this.setDefaultRules();
419    this.katakanaRegexp = new RegExp("^[\u30A0-\u30FF\x20\u3000]+$");
420    this.emailRegexp = new RegExp("^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$"); // via HTML Living Standard
421    this.urlRegexp = new RegExp("^(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})$"); // via Stack Overflow(3809401)
422    this.telRegexp = new RegExp("^[0-9\-]*$");
423    this.zipcodeRegexp = new RegExp("^[0-9]*$");
424  }
425
426  TfMwwpformValidator.prototype = {
427    /**
428     * デフォルトの入力チェックを設定。
429     * 以下の入力チェックを行う。
430     * ・クラスに .tf-katakana を含むフィールドに対してのカタカナチェック
431     * ・クラスに .tf-tel を含むフィールドに対しての電話番号の正当性チェック
432     * ・クラスに .tf-zipcode を含むフィールドに対しての郵便番号の正当性チェック
433     * ・type="email" のフィールドに対してのメールアドレスの正当性チェック
434     * ・type="url" のフィールドに対してのURLの正当性チェック
435     */
436    setDefaultRules: function() {
437      // カタカナの正当性チェック
438      this.addRule(function($field, $form) {
439        if ($field.hasClass(CLASS_KATAKANA) && $field.val() !== '') {
440          if (!(this.katakanaRegexp.test($field.val()))) {
441            return $field.attr('name') + 'にカタカナ以外の文字が入力されています。';
442          }
443        }
444        return true;
445      });
446
447      // 電話番号の正当性チェック
448      this.addRule(function($field, $form) {
449        if ($field.hasClass(CLASS_TEL) && $field.val() !== '') {
450          var valWithoutHyphen = $field.val().replaceAll('-', '');
451          if (!(this.telRegexp.test($field.val()))) {
452            return $field.attr('name') + 'に数字とハイフン以外の文字が入力されています。';
453          } else if (valWithoutHyphen.length < 9) {
454            return $field.attr('name') + 'が9文字以上入力されていません。現å

454œ¨ã®æ–‡å­—数は' + valWithoutHyphen.length + '文字です。';
455          }
456        }
457        return true;
458      });
459
460      // 郵便番号の正当性チェック
461      this.addRule(function($field, $form) {
462        if ($field.hasClass(CLASS_ZIPCODE) && $field.val() !== '') {
463          if (!(this.zipcodeRegexp.test($field.val()))) {
464            return $field.attr('name') + 'に数字以外の文字が入力されています。';
465          } else if ($field.val().length < 7) {
466            return $field.attr('name') + 'が7文字以上入力されていません。現在の文字数は' + $field.val().length + '文字です。';
467          }
468        }
469        return true;
470      });
471
472      // メールアドレスの正当性チェック
473      this.addRule(function($field, $form) {
474        if ($field.attr('type') === 'email' && $field.val() !== '' && !(this.emailRegexp.test($field.val()))) {
475          return $field.attr('name') + 'が正しくありません。';
476        }
477        return true;
478      });
479
480      // URLの正当性チェック
481      this.addRule(function($field, $form) {
482        if ($field.attr('type') === 'url' && $field.val() !== '' && !(this.urlRegexp.test($field.val()))) {
483          return $field.attr('name') + 'が正しくありません。';
484        }
485        return true;
486      });
487    },
488
489    /**
490     * フィールドに対する入力値チェック
491     * @param {TfMwwpformField} field 
492     * @param {jQuery} $form
493     * @returns エラーがある場合はエラーメッセージ
494     */
495    validate: function(field, $form) {
496      var $field = field.getField();
497      var i, error = null;
498      for (i = 0; i < this.rules.length; i++) {
499        error = this.rules[i].apply(this, [$field, $form]);
500        if (error !== true) break;
501      }
502      return error;
503    },
504
505    /**
506     * 入力チェックルールの追加。
507     * 引数に与えた関数は、その引数としてフィールド（jQuery）とフォーム（jQuery）を受け取る。
508     * 引数に与えた関数は、エラーがある場合はエラーメッセージ、エラーがない場合は true を返す必要がある。
509     * @param {function} func 
510     */
511    addRule: function(func) {
512      this.rules.push(func);
513    },
514
515    /**
516     * クラスに .tf-required を含むフィールドに対しての必須チェック
517     * チェックボックスの場合はいずれか一つにチェックが入っていればOK
518     */
519    addRequiredRule: function() {
520      // チェックボックス + ラジオボタン
521      this.addRule(function($field, $form) {
522        if ($field.hasClass(CLASS_REQUIRED) && $.inArray($field.attr('type'), ['checkbox', 'radio']) >= 0) {
523          var field = new TfMwwpformMultiField($field, $form);
524          if (field.isEmpty()) {
525            return field.getName() + 'がチェックされていません。';
526          }
527        }
528        return true;
529      });
530
531      // ファイル
532      this.addRule(function($field, $form) {
533        if ($field.hasClass(CLASS_REQUIRED) && ($field.attr('type') === 'file')) {
534          var field = new TfMwwpformFileField($field);
535          if (field.isEmpty()) {
536            return field.getName() + 'が入力されていません。';
537          }
538        }
539        return true;
540      });
541
542      // チェックボックス、ラジオボタン、ファイル以外
543      this.addRule(function($field, $form) {
544        if ($field.hasClass(CLASS_REQUIRED) && !($.inArray($field.attr('type'), ['checkbox', 'radio', 'file']) >= 0)) {
545          var field = new TfMwwpformField($field, $form);
546          if (field.isEmpty()) {
547            if ($field.prop('tagName') === 'SELECT') {
548              return field.getName() + 'が選択されていません。';
549            }
550            return field.getName() + 'が入力されていません。';
551          }
552        }
553        return true;
554      });
555    }
556  }
557
558
559  /******************************************************
560   * フォームクラス
561   * メインとなるクラス
562   ******************************************************/
563  function TfMwwpform($form) {
564    this.$form = $form;
565    this.fields = this.findFields();
566    this.errorManager = new TfMwwpformErrorManager(this.$form, this.fields);
567    this.validator = new TfMwwpformValidator();
568    this.requireCounter = new TfMwwpformRequireCounter(this.$form, this.fields, this.validator);
569    this.submitButton = new TfMwwpformSubmitButton(this.$form);
570
571    this.initFillMarker();
572    this.setValidationEvent();
573    this.initAutokana();
574    this.initAjaxzip3();
575    this.initInputmode();
576    this.initResetButton();
577    this.requireCounter.count();
578    this.updateSubmit();
579
580    this.submitButton.onclick(this.preSubmitCheck, this);
581  }
582
583  TfMwwpform.prototype = {
584    validator: this.validator,
585
586    findFields: function() {

587      var $fields = this.$form.find('input:not([type="hidden"],[type="file"],[type="checkbox"],[type="radio"]), select, textarea').not('.' + CLASS_IGNORE);
588      var fileFields = this.findFileFields();
589      var multiFields = this.findMultiFields();
590      var fields = [];
591      var $form = this.$form;
592      $fields.each(function() {
593        fields.push(new TfMwwpformField($(this), $form));
594      });
595      return fields.concat(fileFields, multiFields);
596    },
597
598    /**
599     * ファイルフィールドをTfMwwpformFileFieldの配列で返す
600     * @returns TfMwwpformFileField[]
601     */
602    findFileFields: function() {
603      var $fileFields = this.$form.find('input[type="file"]').not('.' + CLASS_IGNORE);
604      var fileFields = [];
605      $fileFields.each(function() {
606        fileFields.push(new TfMwwpformFileField($(this)));
607      });
608      return fileFields;
609    },
610
611    /**
612     * チェックボックス + ラジオボタンフィールドをTfMwwpformMultiFieldの配列で返す
613     * @returns TfMwwpformMultiField[]
614     */
615    findMultiFields: function() {
616      var $fields = this.$form.find('input[type="checkbox"],input[type="radio"]').not('.' + CLASS_IGNORE);
617      var $form = this.$form;
618      var fields = [];
619      $fields.each(function() {
620        fields.push(new TfMwwpformMultiField($(this), $form));
621      });
622      return fields;
623    },
624
625    /**
626     * 入力値チェック設定
627     */
628    setValidationEvent: function() {
629      var self = this;
630      this.fields.forEach(function(field) {
631        var $field = field.getField();
632
633        // 確認画面から戻ってきた時用
634        self.reloadField(field, false);
635
636        // フィールドからフォーカスを外した時またはチェックを切り替えた時の読み取り
637        if ($field.attr('type') === 'checkbox' || $field.attr('type') === 'radio') {
638          $field.on('change', function() {
639            self.reloadField(field, true);
640          });
641        } else {
642          $field.on('blur', function() {
643            self.reloadField(field, true);
644          });
645        }
646      });
647
648      // ファイルフィールドはMWWPFormの仕様上使い捨てなので新規に作成されたinput[type="file"]に対してもチェックを行う
649      this.$form.on('click', 'input[type="file"]', function() {
650        var field = new TfMwwpformFileField($(this));
651        $(this).on('blur', function() {
652          self.reloadField(field, true);
653        });
654      })
655
656      // ファイルフィールドのバツボタンを押した時にフィールドを再チェック
657      this.$form.find('.mwform-file-delete').each(function() {
658        $(this).on('click', function() {
659          var field = new TfMwwpformFileField($(this).prevAll('input[type="file"]'));
660          setTimeout(function() {
661            self.reloadField(field, true);
662          }, 150);
663        })
664      });
665
666      // 必須チェックを追加
667      // 初期表示時に必須チェックを行うと最初からエラーメッセージが表示されてしまうため、
668      // それを防ぐために必須チェックのみ後から追加する
669      this.validator.addRequiredRule();
670    },
671
672    /**
673     * フィールドの値を読み取り、入力値のチェック及びマーカーの表示切り替えを行う
674     * @param {TfMwwpformField} field
675     * @param {bool} reloadErrorMessage エラメッセージを更新するかどうか
676     */
677    reloadField: function(field, reloadErrorMessage) {
678      var $field = field.getField();
679      var result = this.validator.validate(field, this.$form);
680      if (reloadErrorMessage) {
681        this.errorManager.clearErrorMessageByField(field);
682        if (result !== true) {
683          this.errorManager.setErrorMessageByField(field, result);
684        }
685      }
686      if ($field.data('kanafield')) {
687        // 自動かな入力フィールドがあればそのフィールドの再チェック
688        this.reloadField($field.data('kanafield'), reloadErrorMessage);
689      }
690
691      var $marker = this.findMarker(field);
692      $marker.each(function() {
693        var marker = $(this).data('tfMarker');
694        if (!field.isEmpty() && result === true) {
695          marker.filled(field);
696        } else {
697          marker.unfilled(field);
698        }
699      });
700
701      this.requireCounter.count();
702      this.updateSubmit();
703    },
704
705    /**
706     * マーカー要素にTfMwwpformFillMarkerインスタンスを紐付ける
707     */
708    initFillMarker: function() {
709      var self = this;
710      this.fields.forEach(function(field) {
711        $marker = self.findMarker(field);
712        $marker.each(function() {
713          var $this = $(this);
714          var marker = $this.data('tfMarker');
715          if (!marker) {
716            marker = new TfMwwpformFillMarker($marker);
717            $this.data('tfMarker', marker);
718          }
719          marker.addField(field);
720        });
721      });
722    },
723
724    findMarker: function(field) {
725      var name = field.getName();
726      var $marker = this.$form.find('.tf-marker-' + name);
727      return $marker;
728    },
729
730    /**
731     * 自動かな入力設定
732     * 別のフィールドの入力もとにかな入力をしたい場合、
733     * かな入力したいフィールドを .tf-autokana クラスを持つ要素で囲う。
734     * .tf-autokana クラスを持つ要素に data-autokana で入力元のフィールドを指定する。
735     * 例）
736     * [mwform_text name="名前（漢字）" id="namae"]
737     * <span class="tf-autokana" data-autokana="#namae" name="名前（ふりがな）">[mwform_text ...]</span>
738     * 
739     * カタカナにしたい場合は .tf-autokana クラスを持つ要素に .tf-autokana-katakana を追加する。
740     */
741    initAutokana: function() {
742      this.$form.find('.' + CLASS_AUTOKANA).each(function(index, autokana) {
743        var $autokana = $(autokana);
744        var $child = $autokana.find('input');
745        var $parent = $($autokana.attr(DATA_AUTOKANA));
746        var isKatakana = $autokana.hasClass(CLASS_AUTOKANA_KATAKANA);
747        if ($parent.length) {
748          $.fn.autoKana($parent, $child, {katakana: isKatakana});
749          $parent.data('kanafield', new TfMwwpformField($child));
750        }
751      });
752    },
753
754    /**
755     * Ajaxzip3設定
756     * 郵便番号入力フィールドを .tf-ajaxzip3 クラスを持つ要素で囲う。
757     * .tf-ajaxzip3 クラスを持つ要素の data-onkeyup に記述したスクリプトがそのまま
758     * 郵便番号入力フィールドのOnKeyUp属性となる。
759     */
760    initAjaxzip3: function() {
761      this.$form.find('.' + CLASS_AJAXZIP3).each(function(index, ajaxzip3) {
762        var $ajaxzip3 = $(ajaxzip3);
763        var $target = $ajaxzip3.find('input');
764        var onkeyup = $ajaxzip3.attr(DATA_ONKEYUP);
765        $target.attr('onKeyUp', onkeyup);
766      });
767    },
768
769    /**
770     * 入力キーボードの指定
771     * .tf-tel クラスを持つフィールドは電話番号用キーボードを表示
772     * .tf-zipcode クラスを持つフィールドは数字入力用キーボードを表示
773     */
774    initInputmode: function() {
775      this.fields.forEach(function(field) {
776        var $field = field.getField();
777        if ($field.hasClass(CLASS_TEL)) {
778          $field.attr('inputmode', 'tel');
779        }
780        if ($field.hasClass(CLASS_ZIPCODE)) {
781          $field.attr('inputmode', 'numeric');
782        }
783      });
784    },
785
786    /**
787     * サブミットボタンの有効/無効を更新
788     */
789    updateSubmit: function() {
790      if (this.requireCounter.remain === 0) {
791        this.submitButton.enable();
792      } else {
793        this.submitButton.disable();
794      }
795    },
796
797    /**
798     * サブミットボタンが無効状態の時のテキストを設定
799     */
800    setDisabledSubmitText: function(text) {
801      this.submitButton.setDisabledText(text);
802    },
803
804    /**
805     * サブミットボタンを押した時の最終チェック
806     * @returns bool
807     */
808    preSubmitCheck: function() {
809      var hasError = false;

810      var self = this;
811      var $errorField = null;
812      this.fields.forEach(function(field) {
813        if (self.validator.validate(field, self.$form) !== true) {
814          hasError = true;
815          self.reloadField(field, true);
816          if ( !$errorField ) {
817            $errorField = field.getField();
818          }
819          return false;
820        }
821      });
822
823      if (hasError) {
824        var $anchor = this.setErrorAnchor($errorField);
825        console.log($anchor);
826        $("html,body").animate({scrollTop:$anchor.offset().top},300);
827      }
828
829      return !hasError;
830    },
831
832    /**
833     * エラー部分へスクロールするために、エラー部分にタグを設置する
834     */
835    setErrorAnchor: function($field) {
836      this.$form.find('.' + CLASS_ERROR_ANCHOR).remove();
837      var $anchor = $('<span>');
838      $anchor.addClass(CLASS_ERROR_ANCHOR);
839      $anchor.insertBefore($field);
840      return $anchor;
841    },
842
843    /**
844     * リセットボタンの設定
845     */
846    initResetButton: function() {
847      var canReset = this.$form.hasClass('mw_wp_form_input');
848      this.$form.find('[type="reset"]').each(function() {
849        var $resetButton = $(this);
850
851        if (!canReset) {
852          $resetButton.hide();
853          return;
854        }
855
856        $(this).on('click', function() {
857          if (confirm('入力された内容をリセットしてもよろしいですか？')) {
858            // window.location.reload()を使用するとスクロール位置が保持されてしまうため、
859            // それを防ぐためにlocation.hrefを使用する。
860            location.href = location.href;
861          }
862        });
863      });
864    }
865  }
866
867
868  /******************************************************
869   * フォーム読み込み
870   ******************************************************/
871  var $forms = $('.mw_wp_form');
872  $forms.each(function() {
873    var $form = $(this);
874    $form.data('tfMwwpform', new TfMwwpform($form));
875  });
876
877
878  /******************************************************
879   * スクロール位置調整
880   ******************************************************/
881  if (typeof mwform_scroll !== 'undefined') {
882    if (window.innerWidth > 750) {
883      // PC
884      mwform_scroll.offset = -100;
885    } else {
886      // SP
887      mwform_scroll.offset = -50;
888    }
889  }
890});