JSFiddle - React, Tailwind, and code Playground

by sunil puvvada

HTML

<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form action='includes/pgd_cc.php' METHOD='POST' id="ccSelectForm">
  <div class="control-group">
    <label class="control-label" for="inputEmail"><strong>Email Address</strong>

    </label>
    <div class="controls">
      <input type="text" name="inputEmail" placeholder="[email protected]" id="inputEmail" />
    </div>
    <label class="control-label" for="inputEmailConfirm"><strong>Confirm Email Address</strong>

    </label>
    <div class="controls">
      <input type="text" name="inputEmailConfirm" placeholder="[email protected]" id="inputEmailConfirm" />
    </div>
  </div>
  <button type="submit" id="emailSubmit" disabled="disabled" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" title="Click me to buy">Credit Card Checkout &raquo;</button>

JavaScript

$(document).ready(function() {

  $('#ccSelectForm').validate({
    rules: {
      inputEmail: {
        required: true,
        email: true
      },
      inputEmailConfirm: {
        equalTo: '#inputEmail'
      }
    }
  });

  $('#ccSelectForm input').on('keyup blur', function() {
    if ($('#ccSelectForm').valid()) {
      $('button.btn').prop('disabled', false);
    } else {
      $('button.btn').prop('disabled', 'disabled');
    }
  });

});