JSFiddle - React, Tailwind, and code Playground

by mrrodd

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js"></script>
<table align="left">
  <tr>
    <td align="left">
      <form name="signup" id="signup" action="SignUpServlet" method="post">
        <table width="400px" align="right" class="">
          <fieldset>
            <legend>Sign Up:</legend>
            <tr>
              <td>First Name:</td>
              <td>
                <input type="text" id="firstname" name="firstname" required="required">*</td>
            </tr>
            <tr>
              <td>Last Name:</td>
              <td>
                <input type="text" id="lastname" name="lastname" required="required">*</td>
            </tr>
            <tr>
              <td>Address Line 1:</td>
              <td>
                <input type="text" id="address1" name="address1" required="required">*</td>
            </tr>
            <tr>
              <td>Address Line 2:</td>
              <td>
                <input type="text" id="address2" name="address2">
              </td>
            </tr>
            <tr>
              <td>City:</td>
              <td>
                <input type="text" id="city" name="city" required="required">*</td>
            </tr>
            <tr>
              <td>County:</td>
              <td>
                <input type="text" id="county" name="county" required="required">*</td>
            </tr>
            <tr>
              <td>Postcode:</td>
              <td>
                <input type="text" id="postcode" name="postcode" required="required">*</td>
            </tr>
            <tr>
              <td>Phone:</td>
              <td>
                <input type="text" id="phone" name="phone">
              </td>
            </tr>
            <tr>
              <td>Email Address:</td>
              <td>
                <input type="text" id="email_s" name="email_s"...

CSS

#docs {
  display: block;
  position: absolute;
  bottom: 0;
}

JavaScript

$().ready(function () {
  // validate signup form on keyup and submit
  $("#signup").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      address1: "required",
      city: "required",
      county: "required",
      postcode: "required",

      password_s: {
        required: true,
        minlength: 5
      },
      password_s_con: {
        required: true,
        minlength: 5,
        equalTo: "#password_s"
      },
      email: {
        required: true,
        email: true
      },

      agree: "required"
    },
    messages: {
      firstname: "Please enter your first name",
      lastname: "Please enter your last name",
      address1: "Please enter your addres",
      city: "Please enter your city/town",
      county: "Please enter your county",
      postcode: "Please enter your postcode",

      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      confirm_password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long",
        equalTo: "Please enter the same password as above"
      },
      email: "Please enter a valid email address",
      agree: "Please accept our policy"
    },
    submitHandler: function (form) { // for demo
      alert('valid form');
      return false;
    }
  });

});