formのsubmit時にdata-loading-textを適切に有効にする

フォームの送信ボタンの二度押しを防ぎたい

必要なもの

• Bootstrap 3
• jQuery

やっていること

• フォームの送信時にsubmitのボタンをdisableにしてローディング表示に変更し、二度押しを防ぐ
• HTML5のバリデーションにも対応する
• いちいちフォームにスクリプトを適用するのが面倒なので、submitボタンにクラス設定をするだけで使えるようにする（便利！

ポイント

• input要素の checkValidity() を適切に処理しないと、requiredな要素などがあった場合に対処できない
  • input要素がエラーになっているのに、ボタンだけがローディング中になってしまう
• input[type="submit"] でも button でも対応可能
  • classに btn と loading-button の指定が必須

コード

app.js

$(function () {
    // submitボタンにloading-buttonクラスを設定した場合、
    // 親フォームが送信される際に data-loading-text の表示に変え、
    // ボタンの二通しを防ぐ
	$('.loading-button').on('click', function () {
        var form = $(this).parents('form:first');

        // フォーム内の各要素がvalidな時だけローディング表示にする
        var valid = true;
        $(form).find(':input').each(function() {
            valid &= this.checkValidity();
        })

        if (valid) {
            var $this = $(this);
            $this.button('loading');
        }
    });
});

form.html

<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="app.js"></script>

<link href="bootstrap.css" rel="stylesheet">

<form>
    <input type="text" required="required">

    <input type="submit" 
    class="btn loading-button"
    data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> 登録しています"
    value="登録する">
</form>