https://my.ai-skill.jp/js/validation_rules.js

1$(function() {
2
3    /**
4     * 全角→半角(クラス定義)
5     * 使用例 : $this->Form->input('name', array('class'=>'numeric_hankaku'))
6     * @todo idを.numeric_hankakuに順次変更すること
7     */
8    $('body').off('change.numeric_hankaku').on('change.numeric_hankaku', '.numeric_hankaku', function(){
9        $(this).numericZenToHan();
10    });
11
12    /**
13     * 全角→半角(関数呼び出し）
14     * 使用例 : $(this).numericZenToHan()
15     */
16    $.fn.numericZenToHan = function()
17    {
18        //データを取得
19        var data = $(this).val();
20        var table = {
21            "０":0,
22            "１":1,
23            "２":2,
24            "３":3,
25            "４":4,
26            "５":5,
27            "６":6,
28            "７":7,
29            "８":8,
30            "９":9
31        };
32        //全角→半角
33        while(data.match(/[０-９]/))
34        {
35            $.each(table, function(n,val){
36                data = data.replace(n,val);
37            });
38        }
39        //0-9以外の文字列を削除する
40        data = data.replace(/[^0-9]/gi,'');
41        
42        //データをセットし直す
43        $(this).val(data);
44    };
45    //初回設定
46    $('.numeric_hankaku').trigger('change');
47
48    /**
49     * 英数字の全角→半角(クラス定義)
50     * 使用例 : $this->Form->input('name', array('class'=>'alphanumeric_char'))
51     */
52    //全角→半角自動切り替え
53    $('body').off('change.alphanumeric_char').on('change.alphanumeric_char', '.alphanumeric_char', function() {
54        
55        $(this).alphanumericZenToChar();
56    });
57    
58    /**
59     * 全角→半角(関数呼び出し）
60     * 使用例 : $(this).numericZenToHan()
61     * 記号 : @._+-,
62     */
63    $.fn.alphanumericZenToChar = function()
64    {
65        //データを取得
66        var data = $(this).val();
67
68        //英数字の変換
69        data = data.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
70            return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
71        });
72        
73        //0-9 a-z A-Z以外の文字列を削除する
74        data = data.replace(/[^0-9 ^a-z ^A-Z]/gi, '');
75        
76        //データをセットし直す
77        $(this).val(data);
78    };
79    //初回設定
80    $('.alphanumeric_char').trigger('change');
81
82    /**
83     * 英数字記号の全角→半角(クラス定義)
84     * 使用例 : $this->Form->input('name', array('class'=>'alphanumeric_hankaku'))
85     */
86    //全角→半角自動切り替え
87    $('body').off('change.alphanumeric_hankaku').on('change.alphanumeric_hankaku', '.alphanumeric_hankaku', function() {
88        
89        $(this).alphanumericZenToHan();
90    });
91    
92    /**
93     * 全角→半角(関数呼び出し）
94     * 使用例 : $(this).numericZenToHan()
95     * 記号 : @._+-,
96     */
97    $.fn.alphanumericZenToHan = function( should_no_delete )
98    {
99        //データを取得
100        var data = $(this).val();
101        //特殊記号テーブル
102        var table = {
103            "ï¼ ":"@",
104            "．":".",
105            "。":".",
106            "＿":"_",
107            "！":"!",
108            "＃":"#",
109            "＄":"$",
110            "％":"%",
111            "＆":"&",
112            "‘":"`",
113            "＋":"+",
114            "ー":"-",
115            "ー":"-",
116            "‐":"-",
117            "‐":"-",
118            "／":"/",
119            "’":"'",
120            "ï¼¾":"^",
121            "｛":"{",
122            "｝":"}",
123            "？":"?",
124            "｜":"|",
125            "～":"~",
126            "＊":"*",
127            "＝":"=",
128            "、":",",
129        };
130        
131        //英数字の変換
132        data = data.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
133            return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
134        });
135        
136        //記号全角→半角
137        while (data.match(/[＠．。＿！＃＄％＆‘＋ーー‐‐／’＾｛｝？｜～＊＝]/))
138        {
139            $.each(table, function(n,val){
140                data = data.replace(n,val);
141            });
142        }
143
144        if (!should_no_delete)
145        {
146            //0-9 a-z A-Z その他特殊記号以外の文字列を削除する
147            data = data.replace(/[^0-9 ^a-z ^A-Z ^\@ ^\. ^\_ ^\$ ^\+ ^\- ^\, ^\n ^\r]/gi, '');
148        }
149        
150        //データをセットし直す
151        $(this).val(data);
152    };
153    //初回設定
154    $('.alphanumeric_hankaku').trigger('change');
155    
156    /**
157     * 英数字の全角→半角(クラス定義)
158     * 使用例 : $this->Form->input('name', array('class'=>'alphanumeric_char'))
159     */
160    //全角→半角自動切り替え
161    $('body').off('change.alphanumeric_char').on('change.alphanumeric_char', '.alphanumeric_char', function() {
162        
163        $(this).alphanumericZenToHan();
164    });
165    
166    $.fn.alphanumericZenToChar = function()
167    {
168        //データを取得
169        var data = $(this).val();
170
171        //英数字の変換
172        data = data.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
173            return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
174        });
175        
176        //0-9 a-z A-Z以外の文字列を削除する
177        data = data.replace(/[^0-9 ^a-z ^A-Z]/gi, '');
178        
179        //データをセットし直す
180        $(this).val(data);
181    };
182    //初期設定
183    $('.alphanumeric_char').trigger('change');
184    
185    /**
186     * 数字を全角→半角にして16文字制限
187     * 使用例 : $this->Form->input('name', array('class'=>'numeric_hankaku'))
188     * @todo idを.numeric_hankakuに順次変更すること
189     */
190    $('body').off('change.numeric_hankaku16').on('change.numeric_hankaku16', '.numeric_hankaku16', function() {
191        $(this).numericZenToHan();
192        
193        var data = $(this).val();
194        
195        // 16文字より大きい場合
196        if (data.length > 16) {
197            data = data.substr(0, 16);
198            $(this).val(data);
199        }
200        
201    });
202    //初回設定
203    $('.numeric_hankaku16').trigger('change');
204
205    /**
206     * 数字を全角→半角にして20文字制限
207     * 使用例 : $this->Form->input('name', array('class'=>'numeric_hankaku'))
208     * @todo idを.numeric_hankakuに順次変更すること
209     */
210    $('body').off('change.numeric_hankaku20').on('change.numeric_hankaku20', '.numeric_hankaku20', function() {
211        $(this).numericZenToHan();
212        
213        var data = $(this).val();
214        
215        // 20文字より大きい場合
216        if (data.length > 20) {
217            data = data.substr(0, 20);
218            $(this).val(data);
219        }
220        
221    });
222    //初回設定
223    $('.numeric_hankaku20').trigger('change');
224
225    /**
226     * 数字を全角→半角にして4文字制限
227     * 使用例 : $this->Form->input('name', array('class'=>'numeric_hankaku'))
228     * @todo idを.numeric_hankakuに順次変更すること
229     */
230    $('body').off('change.numeric_hankaku4').on('change.numeric_hankaku4', '.numeric_hankaku4', function() {
231        $(this).numericZenToHan();
232        
233        var data = $(this).val();
234        
235        // 4文字より大きい場合
236        if (data.length > 4) {
237            data = data.substr(0, 4);
238            $(this).val(data);
239        }
240        
241    });
242    //初回設定
243    $('.numeric_hankaku4').trigger('change');
244
245    //=======================================
246    // rules
247    // 必須ルール
248    //note:ここより下でバリデーションチェックコードを記載してください。

249    $('div.required,th.required+td').find('input:not([type="hidden"])').addClass('validate[required]');
250    $('div.required,th.required+td').find('textarea').addClass('validate[required]');
251    $('div.required,th.required+td').find('select').addClass('validate[required]');
252    //テーブルの項目名の位置上側専用（thの右側にtdがない場合は、次のtrの中を対象にする）
253    $('th.required').each(function(){
254        if ($(this).next('td').length == 0)
255        {
256            $(this).parent('tr').next('tr').find('input:not([type="hidden"])').addClass('validate[required]');
257            $(this).parent('tr').next('tr').find('textarea').addClass('validate[required]');
258            $(this).parent('tr').next('tr').find('select').addClass('validate[required]');
259        }
260    });
261    //form ver2以降
262    $('.myForm input.required:not([type="hidden"])').addClass('validate[required]');
263    $('.myForm textarea.required').addClass('validate[required]');
264    $('.myForm select.required').addClass('validate[required]');
265
266    // 名前ルール
267    $("*[name='data[User][name1]']").addClass('validate[maxSize[64]]');
268    $("*[name='data[User][name2]']").addClass('validate[maxSize[64]]');
269
270    // メアドルール
271    $("*[name='data[User][mail]']").addClass('validate[custom[email], maxSize[254]]');
272
273    // サブアドルール
274    // 複数指定時の全体長ではなく、各アドレスの長さをサーバー側で判定する
275    $("*[name='data[User][submail]']").addClass('validate[custom[subemail]]');
276
277    // UnivaPay メアドルール
278    $("*[name='data[User][em]']").addClass('validate[custom[email], maxSize[254]]');
279
280    // フリガナルール
281    $("*[name='data[User][kana]']").addClass('validate[custom[onlyKana]]');
282
283    // 電話番号ルール
284    $("*[name='data[User][tel]']").addClass('validate[custom[phone]]');
285    
286    // 郵便番号ルール
287    $("*[name='data[User][zipcode]']").addClass('validate[custom[zipcode]]');
288
289    // パスワード
290    $("*[name='data[User][password]']").addClass('validate[custom[password]]');
291
292    // カレンダー型 event_datetime はカレンダー UI 操作のため text 本体が非表示で
293    // validationEngine 標準の :visible 判定では検証対象外になる。submit フックと
294    // validationEngine('validate') 直呼びの両導線から同一判定を再利用する。
295    // select / radio 型の event_datetime は validationEngine 標準で検証されるため、
296    // ここでの専用判定の対象外（カレンダー兄弟 div の有無で識別する）。
297    var resolveEventDatetimeCalendar = function(calendarDatetimeInput) {
298        // bindEventDatetimePromptAutoClose と探索ルールを揃えるため、
299        // 兄弟要素の event_calendar のみを対象にする。
300        return calendarDatetimeInput.nextAll('div.event_calendar').first();
301    };
302
303    var getEventDatetimeRequiredAlertText = function() {
304        return ($.validationEngineLanguage
305            && $.validationEngineLanguage.allRules
306            && $.validationEngineLanguage.allRules.required
307            && $.validationEngineLanguage.allRules.required.alertText)
308            || '* 必須項目です';
309    };
310    
311    var validateEventDatetimeCalendarRequired = function(form) {
312        var calendarDatetimeInput = form.find("input[name='data[User][event_datetime]']").first();
313        if (!calendarDatetimeInput.length) {
314            return true;
315        }
316
317        // 兄弟に event_calendar を持たない場合（select / radio 型）は
318        // validationEngine 標準で検証されるため、ここでは何もしない。
319        var calendar = resolveEventDatetimeCalendar(calendarDatetimeInput);
320        if (!calendar.length) {
321            return true;
322        }
323
324        var hasEventDatetimeValue = $.trim(String(calendarDatetimeInput.val() || '')) !== '';
325        if (hasEventDatetimeValue) {
326            calendarDatetimeInput.validationEngine('closePrompt', calendarDatetimeInput);
327            calendar.validationEngine('closePrompt', calendar);
328            return true;
329        }
330
331        // showPrompt は既存プロンプトがあれば更新されるため、事前の sibling 判定は行わない。
332        calendar.validationEngine('showPrompt', getEventDatetimeRequiredAlertText(), 'error', 'topLeft', true);
333
334        return false;

335    };
336
337    var eventDatetimeValidateSkipFlag = '__eventDatetimeValidateSkip';
338
339    // validationEngine('validate') 直呼び経路でも event_datetime の必須判定を適用する。
340    if (!$.fn.__myaspEventDatetimeValidateHooked) {
341        var originalValidationEngine = $.fn.validationEngine;
342        $.fn.validationEngine = function() {
343            var method = arguments.length > 0 ? arguments[0] : null;
344            var result = originalValidationEngine.apply(this, arguments);
345            if (method !== 'validate') return result;
346
347            var hasInvalidEventDatetime = false;
348            $(this).each(function() {
349                var form = $(this);
350                if (form.attr('id') !== 'UserItemForm') {
351                    return;
352                }
353
354                if (form.data(eventDatetimeValidateSkipFlag)) {
355                    return;
356                }
357
358                if (!validateEventDatetimeCalendarRequired(form)) {
359                    hasInvalidEventDatetime = true;
360                    return false;
361                }
362            });
363
364            return hasInvalidEventDatetime ? false : result;
365        };
366        $.fn.__myaspEventDatetimeValidateHooked = true;
367    }
368
369    // UserItemForm は常時バリデーションを有効化し、event_datetime を持つフォームのみ追加必須判定を行う
370    $("*[id='UserItemForm']").each(function() {
371        var form = $(this);
372
373        var attachOptions = {
374            //コメント位置を左側に設定
375            promptPosition:"topLeft"
376        };
377
378        if (form.find("input[name='data[User][event_datetime]']").length) {
379            // NOTE: 専用判定はカレンダー型 event_datetime に閉じている。
380            // 別種の「非表示だが必須」項目を新たに扱う場合は、
381            // validateEventDatetimeCalendarRequired に混ぜず別関数として追加すること。
382            form.off('submit.eventDatetimeRequired')
383                .on('submit.eventDatetimeRequired', function (e) {
384                    if (validateEventDatetimeCalendarRequired(form)) {
385                        return true;
386                    }
387
388                    // event_datetime 以外の項目エラー表示を維持するため、
389                    // submit 停止前に通常の validate を実行する。
390                    form.data(eventDatetimeValidateSkipFlag, true);
391                    try {
392                        form.validationEngine('validate');
393                    }
394                    finally {
395                        form.removeData(eventDatetimeValidateSkipFlag);
396                    }
397
398                    // event_datetime 未入力時は、同一要素に addEventListener で登録された
399                    // 後続 submit ハンドラ（決済処理など）へ進ませないため即時停止する。
400                    e.preventDefault();
401                    e.stopImmediatePropagation();
402                    return false;
403                });
404        }
405
406        // bind
407        form.validationEngine('attach', attachOptions);
408
409        // datetimeのプロンプト自動的に閉じるイベントをバインド
410        if (form.find("input[name='data[User][event_datetime]']").length && typeof bindEventDatetimePromptAutoClose === 'function') {
411            bindEventDatetimePromptAutoClose(form);
412        }
413    });
414
415    //住所を抜けた時には都道府県もチェックする
416    $("*[name='data[User][zip]']").blur(function(){
417        $("*[name='data[User][pref]']").trigger('blur');
418    });
419
420    //　日付選択で必須ではない場合に、いずれかの選択肢が選ばれた際にエラーメッセージを表示
421    $('body').off('change.required_color').on('change.required_color', '.form_input_datetime1:not(.required), .form_input_datetime2:not(.required)', function() {
422        let freeX = $(this).attr('name').match(/data\[User\]\[([a-z0-9]+)\]\[(year|month|day)\]/)?.[1];
423        if (!freeX) return;
424        let selects = $('select[name^="data[User][' + freeX + ']"]');
425

426        // 選択肢の中に空でない値が存在するか
427        let isSelect = selects.toArray().some(select => $(select).val() !== '' && Number($(select).val()) > 0);
428        // 必須チェックが付与されているかどうか
429        let isRequired = false;
430
431        selects.each(function() {
432            let isSelectAndEmpty = isSelect && $(this).val() === '';
433            // 空の項目に警告色を付与
434            $(this).toggleClass('required_color', isSelectAndEmpty);
435            // 空の項目に必須チェックを付与（まだ付与されていない場合）
436            $(this).toggleClass('validate[required]', isSelectAndEmpty && !isRequired);
437
438            // エラーメッセージを非表示にする
439            if(!isSelectAndEmpty || isRequired){
440                $('.' + $(this).prop('id') + 'formError').fadeOut(300, function() {
441                    $(this).remove();
442                });
443            }
444            // 必須チェックが付与されたことを記録
445            if(isSelectAndEmpty && !isRequired) {
446                isRequired = true;
447            }
448        });
449
450    });
451    // 初回設定
452    $('.form_input_datetime1:not(.required), .form_input_datetime2:not(.required)').trigger('change');
453
454    // 日付選択のエラーメッセージを1つにまとめる
455    $('.myForm select[name$="[day]"].required.form_input_datetime1, .myForm select[name$="[day]"].required.form_input_datetime2').each(function(){
456        let freeX = $(this).attr('name').match(/data\[User\]\[([a-z0-9]+)\]\[(day)\]/)?.[1];
457        if (!freeX) return;
458
459        function setCondRequired(name, id) {
460            const select = $('select[name^="data[User][' + freeX + '][' + name +']"]');
461            select.removeClass('validate[required]')
462                .addClass('validate[condRequired[' + id + ']]')
463                .toggleClass('required_color', $(select).hasClass('required') && ($(select).val() === '' || Number($(select).val()) <= 0));
464        }
465
466        if ($(this).hasClass('form_input_datetime1')) {
467            setCondRequired('month', $('select[name^="data[User][' + freeX + '][year]"]').prop('id'));
468        }
469        setCondRequired('day', $('select[name^="data[User][' + freeX + '][month]"]').prop('id'));
470    });
471    
472    // 初期値の年月日を設定
473    $('.now_year').val(new Date().getFullYear());
474    $('.now_month').val(String(new Date().getMonth() + 1).padStart(2, "0"));
475    $('.now_day').val(String(new Date().getDate()).padStart(2, "0"));
476});