jQuery Validation Form

by Leonardo Trimarchi

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<form id="signup">
  <fieldset>
    <legend>Submit Lead Details</legend>
    <p>
      <label for="Address">Address</label>
      <input id="Address" name="Address" type="text" />
    </p>
    <p>
      <label for="Interest">Area Of Interest</label>
      <input id="Interest" name="Interest" type="text" />
    </p>
    <p>
      <label for="City">City</label>
      <input id="City" name="City" type="text" />
    </p>
    <p>
      <label for="DOB">Date of Birth</label>
      <input id="DOB" name="DOB" type="text" />
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="text" />
    </p>
    <p>
      <label for="FirstName">First Name</label>
      <input id="FirstName" name="FirstName" type="text" />
    </p>
    <p>
      <label for="LastName">Last Name</label>
      <input id="LastName" name="LastName" type="text" />
    </p>
    <p>
      <label for="Origin">Lead Origin</label>
      <input id="Origin" name="Origin" type="text" />
    </p>
    <p>
      <label for="Phone">Phone Number</label>
      <input id="Phone" name="Phone" type="text" />
    </p>
    <p>
      <label for="ProductCode">ProductCode</label>
      <input id="ProductCode" name="ProductCode" type="text" />
    </p>
    <p>
      <label for="State">State</label>
      <input id="State" type="text" />
    </p>
    <p>
      <label for="ZipCode">Zip Code</label>
      <input id="ZipCode" digits="true" type="text" name="zipcode" />
    </p>
    <p>
      <label for="CreatedOn">Created On</label>
      <input id="CreatedOn" name="CreatedOn" type="text" />
    </p>
    <p>
      <label for="GeneralAgentCode">General Agent Code</label>
      <input id="GeneralAgentCode" name="GeneralAgentCode" type="text" />
    </p>
    <p>
      <label for="Age">Age</label>
      <input id="Age" name="Age" type="text" />
    </p>
    <p>
      <label for="Cost">Cost</label>
      <input id="Cost" name="Cost"...

CSS

#signup {
  width: 800px;
  margin: 30px auto;
}

label {
  width: 140px;
  display: inline-block;
}

label.error {
  color: red;
  width: 300px;
}

JavaScript

var lead = {
  Address: $('#Address').val, //'123 Main St',
  AreaOfInterest: $('#Interest').val, //'Final Expense',
  City: $('#City').val, //'Atlanta',
  DOB: $('#DOB').val, //'1/1/1970',
  Email: $('#Email').val, //'[email protected]',
  FirstName: $('#FirstName').val, //'Joe',
  LastName: $('#LastName').val, //'Jstest',
  LeadOrigin: $('#Origin').val, //'TV',
  Phone: $('#Phone').val, //'123-456-7890',
  ProductCode: $('#ProductCode').val, //'R2M',
  State: $('#State').val, //'GA',
  Zip: $('#ZipCode').val, //'30019',
  CreatedOn: $('#CreatedOn').val, //'1/22/2016',
  GeneralAgentCode: $('#GeneralAgentCode').val, //'000000',
  Age: $('#Age').val, //'070'
  Cost: $('#Cost').val //34
}