JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js"></script>
  </head>
  <body>
    <div id="main">
      <form action="request.php" method="post" id="purchase">
        <div><label><input type="checkbox" name="course" value="1" /> Option 1</label></div>
        <div><label><input type="checkbox" name="course" value="2" /> Option 2</label></div>
        <div><label for="creditCard">Credit Card Number:</label><input type="text" id="creditCard" name="creditCard" maxlength="20" /></div>
        <div><label for="expMonth">Expiration Date:</label><input type="text" id="expMonth" name="expMonth" size="2" maxlength="2" /><label for="expYear">/</label><input type="text" id="expYear" name="expYear" size="2" maxlength="2" /></div>
        <div><input type="submit" value="Purchase Selected Courses" name="submit" /></div>      </form>
      <script>
        $(function(){
          $('#purchase').validate({
            rules:{
              course:{
                minLength:1
              },
              creditCard: {
                required: true,
                creditCard: true
              },
              expMonth: {
                required: true,
                min: 1,
                max: 12,
                digits: true
              },
              expYear: {
                required: true,
                min: 12,
                max: 60,
                digits: true
              }
            }
          })
        })
      </script>
    </div>
  </body>
</html>