<html>
<head>
  <meta charset="UTF-8">
  <title>formrun.js - Inline Validation</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.slim.min.js" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
  <script src="https://sdk.form.run/js/v2/formrun.js"></script>
</head>
<body>

<div class="container">
  <h1>formrun.js <small> - Inline Validation</small></h1>

  <form class="formrun" action="#" method="get">
    <div class="form-group"
        data-formrun-class-if-success="has-success" data-formrun-class-if-error="has-danger" data-formrun-target="お名前">
      <label class="form-control-label" for="name">お名前</label>
      <input type="text" class="form-control" id="name" name="お名前"
            data-formrun-required data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger">
      <span class="text-danger" data-formrun-show-if-error="お名前">お名前を正しく入力してください</span>
    </div>

    <div class="form-group"
        data-formrun-class-if-success="has-success" data-formrun-class-if-error="has-danger" data-formrun-target="メールアドレス">
      <label class="form-control-label" for="email">メールアドレス</label>
      <input type="text" class="form-control" id="email" name="メールアドレス"
            data-formrun-required data-formrun-type="email" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger">
      <span class="text-danger" data-formrun-show-if-error="メールアドレス">メールアドレスを正 しく入力してください</span>
    </div>

    <div class="form-group"
        data-formrun-class-if-success="has-success" data-formrun-class-if-error="has-danger" data-formrun-target="電話番号">
      <label class="form-control-label" for="email">電話番号</label>
      <input type="text" class="form-control" id="tel" name="電話番号"
            data-formrun-required data-formrun-type="tel" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger">
      <span class="text-danger" data-formrun-show-if-error="電話番号">電話番号を正しく入力してください</span>
    </div>

    <div class="form-group"
        data-formrun-class-if-success="has-success" data-formrun-class-if-error="has-danger" data-formrun-target="住所">
      <label class="form-control-label" for="email">住所</label>

      <div class="row">
        <div class="col-xs-4">
          <input type="text" class="form-control" name="郵便番号" placeholder="郵便番号"
                data-formrun-required data-formrun-type="postal-code-jp">
        </div>
        <div class="col-xs-8">
          <input type="text" class="form-control" name="住所1" placeholder="住所1"
                data-formrun-required data-formrun-type="region" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger">
          <input type="text" class="form-control" name="住所2" placeholder="住所2"
                data-formrun-required data-formrun-type="locality street-address" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger">
        </div>
      </div>
      <span class="text-danger" data-formrun-show-if-error="住所1">住所を正しく入力してください</span>
    </div>

    <div class="form-group"
        data-formrun-class-if-success="has-success" data-formrun-class-if-error="has-danger" data-formrun-target="お問い合わせ">
      <label class="form-control-label" for="body">お問い合わせ</label>
      <textarea class="form-control" id="body" name="お問い合わせ"
                data-formrun-required data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger"></textarea>
      <span class="text-danger" data-formrun-show-if-error="お問い合わせ">お問い合わせを正しく入力してください</span>
    </div>

    <fieldset class="form-group row">
      <span class="col-sm-2">性別</span>
      <div class="col-sm-10">
        <label class="form-check-label form-check-inline">
          <input class="form-check-input" type="radio" name="性別" value="男性" data-formrun-required>
          男性
        </label>
        <label class="form-check-label form-check-inline">
          <input class="form-check-input" type="radio" name="性別" value="女性" data-formrun-required>
          女性
        </label>
        <br>
        <span class="text-danger" data-formrun-show-if-error="性別">性別を入力してください</span>
      </div>
    </fieldset>

    <div class="form-group row">
      <label class="col-sm-2">業種</label>
      <div class="col-sm-10">
        <select class="form-control form-control-lg" name="業種" data-formrun-required>
          <option value>--選択してください--</option>
          <option value="IT">IT</option>
          <option value="メーカー">メーカー</option>
          <option value="商社">商社</option>
          <option value="医療">医療</option>
          <option value="金融">金融</option>
          <option value="建設・不動産">建設・不動産</option>
          <option value="金融">金融</option>
          <option value="人材">人材</option>
          <option value="小売">小売</option>
          <option value="飲食">飲食</option>
          <option value="物流">物流</option>
          <option value="その他">その他</option>
        </select>
        <span class="text-danger" data-formrun-show-if-error="業種">業種を正しく入力してください</span>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-sm-10 offset-sm-2">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox" name="個人情報保護方針に同意" data-formrun-required> <a>個人情報保護方針</a>に同意します
          </label>
        </div>
        <span class="text-danger" data-formrun-show-if-error="個人情報保護方針に同意">同意してください</span>
      </div>
    </div>

    <div class="_formrun_gotcha">
      <style media="screen">._formrun_gotcha {position:absolute!important;height:1px;width:1px;overflow:hidden;}</style>
      <label for="_formrun_gotcha">If you are a human, ignore this field</label>
      <input type="text" name="_formrun_gotcha" id="_formrun_gotcha" tabindex="-1">
    </div>
    
    <button type="submit" class="btn btn-primary pull-xs-right" data-formrun-error-text="未入力の項目があります" data-formrun-submitting-text="送信中...">送信</button>
    
  </form>
  
</div><!-- /.container -->

</body>
</html>

body {
  padding: 50px 0 100px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.