パーツ番号 04-11-08 ・ JavaScript使用

赤枠パルスエラーフィールド

フォーカスを外した際に入力形式が誤っていると、枠線がパルス状に光って知らせる入力欄。Contact Form 7の郵便番号欄など形式チェックが必要な項目に活用できます。

jsinput

プレビュー

ソースコード

HTML

<div class="d04-11-08-field">
          <label class="d04-11-08-label" for="d04-11-08-input">郵便番号</label>
          <input type="text" class="d04-11-08-input" id="d04-11-08-input" placeholder="123-4567">
        </div>

CSS

.d04-11-08-field{width:min(250px,100%)}
        .d04-11-08-label{display:block;margin-bottom:6px;font-size:13px;color:#555;font-weight:700}
        .d04-11-08-input{width:100%;padding:12px 14px;font-size:14px;border:2px solid #d5d9e0;border-radius:8px;outline:none;background:#fff;transition:border-color .25s}
        .d04-11-08-input:focus{border-color:#4a6cf7}
        .d04-11-08-input.is-invalid{border-color:#e5484d;animation:d04-11-08-pulse 1s ease 2}
        @keyframes d04-11-08-pulse{
          0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}
          50%{box-shadow:0 0 0 6px rgba(229,72,77,0)}
        }

JavaScript

(function(){
        var input=document.querySelector('.d04-11-08-input');
        if(!input)return;
        var re=/^\d{3}-?\d{4}$/;
        input.addEventListener('blur',function(){
          input.classList.remove('is-invalid');
          if(input.value.trim()!==''&&!re.test(input.value.trim())){
            void input.offsetWidth;
            input.classList.add('is-invalid');
          }
        });
        input.addEventListener('input',function(){
          input.classList.remove('is-invalid');
        });
      })();

クラス名 .d04-11-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。