JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://beta.generalsentiment.com/js/jquery-plugins/validate/jquery.validate.min.js"></script>
<script src="http://beta.generalsentiment.com/js/jquery-plugins/validate/additional-methods.js"></script>
<form id="audience-involvement-report-form" name="audience-involvement-report-form" action="/-.html" method="POST" title="Download Report" novalidate="novalidate">
<div id="download-form-legend">
Download the Free Report
</div>
<fieldset id="download-form-fieldset">
<div class="clearfix">
<input class="span6" id="name-field" type="text" name="name-field" placeholder="First and Last Name">
</div>
<div class="clearfix">
<input class="span6" id="company-field" type="text" name="company-field" placeholder="Company">
</div>
<div class="clearfix">
<input class="span6" id="number-field" type="text" name="number-field" placeholder="Phone Number">
</div>
<div class="clearfix">
<input class="span6" id="email-field" type="text" name="email-field" placeholder="Email Address">
</div>
<div id="download-form-footer" class="clearfix">
<span id="download-it">
<button id="download-report-button" class="btn primary">Download Report</button>
</span>
</div>
</fieldset>
</form>
JavaScript
$("img#download-report-button").live('click', function() {
$("#audience-involvement-report-form").submit();
});
$("#audience-involvement-report-form").validate({
submitHandler: function(form) {
// do other stuff for a valid form
//form.submit();
//console.log("form valid!", form);
console.log("wohoo!! success");
},
rules: {
"name-field": "required",
"company-field": "required",
"email-field": {
required: true,
email: true
},
"number-field": {
required: true,
phoneUS: true
}
},
errorElement: "span"
});