JSFiddle - React, Tailwind, and code Playground

by neo_na_takahashi

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--input内にあるclassはjQuery-Validation-Engineを動かすためです。
https://github.com/posabsolute/jQuery-Validation-Engine
-->
<form action='' id='register' method='post'>
  <table>
    <tr>
      <th>メールアドレス</th>
      <td>
        <input class='email_form validate[required,custom[email]]' id='email' name='email' type='text' />
      </td>
    </tr>
    <tr>
      <th>パスワード</th>
      <td>
        <input class='form-control input-sm text-input validate[required,minSize[4]]' id='password' name='password' type='password' />
      </td>
    </tr>
    <tr>
      <th>パスワード確認</th>
      <td>
        <input class='form-control input-sm text-input validate[required,equals[password],minSize[4]]' id='password2' name='password2' type='password' />
      </td>
    </tr>
    <tr>
      <th>会社名</th>
      <td>
        <input class='validate[required]' id='company_name' name='company_name' type='text' />
      </td>
    </tr>
    <tr>
  </table>
  <p>
    <input id="register_confirm_new" name="commit" type="submit" value="次へ（料金の確認）" />
  </p>
</form>

CSS

input[type="submit"]#submit_inquiry_new {
  width: 350px;
  padding: 20px 0;
  background-color: #666;
  border: none;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  -webkit-transition: background-color .2s;
  transition: background-color .2s;
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 5px;
}

input[type="submit"]:hover#submit_inquiry_new {
  background-color: #59b1eb;
}

input[type="submit"][disabled]#submit_inquiry_new {
  background-color: #ccc;
  cursor: default;
}

input[type="submit"]#register_confirm_new {
  width: 350px;
  padding: 20px 0;
  background-color: #fe0405;
  border: none;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  -webkit-transition: background-color .2s;
  transition: background-color .2s;
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 5px;
}

input[type="submit"]:hover#register_confirm_new {
  background-color: #ff7d0b;
}

input[type="submit"][disabled]#register_confirm_new {
  background-color: #ccc;
  cursor: default;
}

JavaScript

$(function() {
    $('#register_confirm_new').prop('disabled', true);
    $('#email,#password,#password2,#company_name').on('keydown keyup keypress change', function() {
      if ($(this).val().length > 0) {
        $('#register_confirm_new').prop('disabled', false);
      } else {
        $('#register_confirm_new').prop('disabled', true);
      }
    });
  });