JSFiddle - React, Tailwind, and code Playground

by Atsushi Nakatsugawa

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <form id="form" action="/form" method="POST">
      <div class="form-group">
        <label for="exampleName">名前</label>
        <input name="name" type="text" required />
        <small id="nameHelp" class="form-text text-muted">必須</small>
      </div>
      <div class="form-group">
        <label for="exampleName">メールアドレス</label>
        <input name="email" type="email" id="email_addr" required />
        <small id="emailHelp" class="form-text text-muted">必須</small>
      </div>
      <div class="form-group">
        <label for="exampleName">メールアドレス（確認）</label>
        <input name="email_addr_repeat" type="email" id="email_addr_repeat" required />
        <small id="emailHelp" class="form-text text-muted">確認入力</small>
      </div>
      <div class="form-group">
        <label for="exampleName">電話番号</label>
        <input name="tel" type="tel" id="tel" pattern="[0-9]{2,4}-[0-9]{3,4}-[0-9]{4}" />
        <small id="emailHelp" class="form-text text-muted">ハイフンをつけてください</small>
      </div>
      <p><input type="submit" value="submit" /></p>
    </form>

JavaScript

window.onload = function() {
      var elem = document.getElementById("form");
      elem.addEventListener("submit", function() {
        elem.reportValidity();
      });
      
      var mail = document.getElementById("email_addr_repeat");
      mail.addEventListener("input", function() {
        if (this.value != document.getElementById('email_addr').value) {
          this.setCustomValidity('確認入力されたメールアドレスが異なります');
        } else {
          // input is valid -- reset the error message
          this.setCustomValidity('');
        }
      });
    };