JavaScript jQuery
function

Input Check Function

2017.01.06

送信フォームの入力値があるかどうかを確認するFunction。

各種登録フォームから送信される値があるかないかを確認し、空白文字のみの場合や入力がない場合に確認ダイアログを表示する。入力忘れを確認するためのものなので、空のまま（入力値がないか空白文字）でも送信は可能。

確認ダイアログではなくアラートやエラーとして表示させることも応用次第では可能。

どの要素の入力値を確認するかは、inputCheck()の引数で設定可能。

入力値が空白文字の場合の処理と空白文字に全角スペースを含めるかなどは data.replace の2行で調整。

近年増えてきたTinyMCEを使用した場合の入力値のチェックも下記で可能。

 

[ Sample ]

Nickname:

Blood:



hobby:


Weekday:

 

HTML

JavaScript

<form class="inputCheck" method="post" action="">
Nickname: <input type="text" name="Nickname">
Blood: 
<label><input type="radio" name="blood" value="A">A</label>
<label><input type="radio" name="blood" value="B">B</label>
<label><input type="radio" name="blood" value="AB">AB</label>
<label><input type="radio" name="blood" value="O">O</label>
hobby: 
<label><input type="checkbox" name="hobby[]" value="sports">sports</label>
<label><input type="checkbox" name="hobby[]" value="music">music</label>
<label><input type="checkbox" name="hobby[]" value="books">books</label>
Weekday:
<select name="weekday">
<option></option>
<option>Sun</option>
<option>Mon</option>
<option>Tue</option>
<option>Wed</option>
<option>Thr</option>
<option>Fri</option>
<option>Sat</option>
</select>
<textarea name="inquiry"></textarea>
<textarea class="richEditor" name="inquiry-rich"></textarea>
<input class="" type="submit" value="送信">
</form>

$(function(){
    inputCheck();
});

/* Input Fields Empty Check Function */
var inputCheck = function (target) {
    $('.inputCheck').on('submit', function () {
        target = target || 'input[type="text"], input[type="radio"], input[type="checkbox"], select option:selected, textarea';
        var flag = true;
        var form = $(this).closest('form');
        $(form).find(target).map(function(i, e) {
            if ($(this).attr('type') == 'radio' || $(this).attr('type') == 'checkbox') {
                var attrName = $(this).attr('name');
                var checkedTarget = $('[name="' + attrName + '"]:checked');
                var data = ($(checkedTarget).length) ? $(checkedTarget).val() : '';
            } else {
                var data = $(this).val();
            }
            data = data.replace(/^[　 ]+$/g, '');
            data = data.replace(/(^s+)|(s+$)/g, '');
            if (!data || data == '') {
                if ($(form).find('iframe').contents().find('body[data-id="' + $(this).attr('name') + '"]').length) {
                    // Case TinyMCE
                    var mceObj = $(form).find('iframe').contents().find('body[data-id="' + $(this).attr('name') + '"]');
                    if (!$(mceObj).text()) return flag = false;
                } else {
                    return flag = false;
                }
            }
        });
        if (!flag) {
            flag = window.confirm('入力項目に空欄がありますがよろしいですか？');
        }
        return flag;
    });
};