Semantic UI Form validationでsubmitする時に、ボタンをローディング状態にする。

2020/02/07
2020/02/24
 しめじ(smeghead)

Semantic UI Button

buttnに loading クラスを追加すれば、ボタンのキャプションが消える。 disabled クラスを追加すれば、ボタンが使用不可になる。

ということなので、Semantic UIのForm validationのonSuccessで、行なえばPostした時だけボタンのキャプションがローディング画像に変わります。

$(function(){
  $('.ui.form').form({
    inline: true,
    fields: {
      gender: {
        rules: [{
          type   : 'checked',
          prompt : 'please select.'
        }]
      },
    },
    onSuccess: function(errors, values) {
      var button = $(this).find('[type=submit]:focus');
      setTimeout(function(){
        button.addClass('disabled loading');
      }, 5);
      return true;
    },
  });
});
しめじ(smeghead)
  • しめじ(smeghead)
JavaScriptSemanticUI

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です


The reCAPTCHA verification period has expired. Please reload the page.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。