JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.pack.js"></script>
<h2 class="qlassikHeader">Please contact me:</h2>
<form id="homeContact" style="background: #FFF;">
<input type="hidden" name="task" value="send" />
<input type="hidden" name="CurrentPage" value="" />
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>Your Name</td>
<td><input name="txtname" type="text" id="txtname" value="" class="required" title=" " /></td>
</tr>
<tr>
<td>Tel</td>
<td><input name="txtTelephone" type="text" id="txtTelephone" value="" /></td>
</tr>
<tr>
<td>Email</td>
<td><input name="txtEmail" type="text" id="txtEmail" value="" class="required email" title=" " /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="Submit" /></td>
</tr>
</table>
</form></td>
</tr>
</table>
CSS
#homeContact { padding:0; margin:0; color: #000; text-align:left; line-height:normal;}
#homeContact a {color: #000;}
#homeContact input {width: 125px; border: 1px solid #AAA; background: #F5F5F5; padding: 2px;}
#homeContact input.error {background:#FEE2CF; border: 1px solid #F00;}
#homeContact input[type=submit] {background: #DDD; color: #000; width: 130px; padding: 4px; font-weight: bold;}
JavaScript
$(document).ready(function(){
$("#homeContact").validate({
//This will be fired when form passes validation
submitHandler:function(){
//Now do your ajax
var MyName = $("#txtname").val();
var MyEmail = $("#txtEmail").val();
var MyTel = $("#txtTelephone").val();
var dataString = 'MyName='+ MyName + '&MyEmail=' + MyEmail + '&MyTel=' + MyTel;
// alert (dataString);return false;
$.ajax({
type: "GET",
url: "../includes/ajax_mail.asp",
data: dataString,
success: function(msg) {
var errorstring = String(msg).substring(0,5);
$('#homeContact').before("<div id='message' style='color: #900;'></div>")
if (errorstring=='Error'){
$('#message').html("<div style='margin-top: 10px;'>"+msg+"</div>")
} else {
$('#homeContact').fadeOut('fast');
$('#message').html("<div style='font-size: 150%'>Thank you</div><div style='margin-top: 10px;'>Your details have been sent.</div>")
.hide().fadeIn('fast');
}
}
});
}
});
});