JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.kinetick.com/JS/jquery.validate.js"></script>
<script src="http://ortalonline.com/js/fancyzoom.js"></script>
<div id="ContactMe">
<div class="contact" style="background-color:#dfeeee;">
<img src="images/Contact.png" alt="contact" style="display:block; padding:15px 0px 0px 10px">
<div style="clear:both"> </div>
<div id="thankyou" style="display:none"><img src="images/Thanks.png" style="display:block; margin:10px auto;"><p>I will be in touch with you soon.</p></div>
<form id="contacts" method="post" action="">
<div id="PIErrorBox">Please Fill in All Fields!</div>
<input tabindex="1" type="text" id="name" name="name" value="Name" onfocus="if (this.value=='Name') this.value='';" onblur="if (this.value=='') this.value='Name';" class="text name" style="display:block">
<input tabindex="3" type="text" id="email" name="email" value="E-mail" onfocus="if (this.value=='E-mail') this.value='';" onblur="if (this.value=='') this.value='E-mail';" class="text mail" style="display:block">
<textarea tabindex="4" id="notes" name="notes" cols="30" rows="3" onfocus="if (this.value=='How Can I Help?') this.value='';" onblur="if (this.value=='') this.value='How Can I Help?';" class="text message" style="display:block">How Can I Help?</textarea>
<input type="submit" class="button" id="submit" value=""></form>
<div class="contact-info">
<!--stuff here -->
</div>
</div>
</div>
JavaScript
jQuery.noConflict();
jQuery('form').live("submit", function(event) {
jQuery("#contacts").validate({
errorPlacement: function(error, element) {},
errorContainer: "#PIErrorBox",
rules: {
name: {
required: true,
NotEqual: 'Name'
},
email: {
required: true,
email: true,
NotEqual: 'Email'
},
notes: {
required: true,
NotEqual: 'How Can I Help?'
}
},
submitHandler: function(form) {
jQuery(".button").hide();
var loader = jQuery('<img src="images/loading.gif" alt="loading..." class="loading">').insertAfter(".button");
var param = jQuery(form).serialize();
jQuery.ajax({
type: "POST",
url: "include/inc_sendmail.php",
data: param,
success: function() {
jQuery('#contacts').hide();
jQuery('#thankyou').show();
}
});
return false;
}
});
});