Validate a form using jquery
//contact form validation jquery code
$(".contact-submit").click(function(e){
//e.preventDefault();
var firstname = $(".contact-firstname").val();
var lastname = $(".contact-lastname").val();
var email = $(".contact-email").val();
var phone = $(".contact-phone").val();
var message = $(".contact-message").val();
if(firstname == ""){
$(".contact-firstname").focus();
$(".first-i").html("Please input firstname here");
return false;
}
if(lastname == ""){
$(".contact-lastname").focus();
$(".contact-lastname").after("<i>Please input lastname here</i>")
return false;
}
if(email == ""){
$(".contact-email").focus();
$(".contact-email").after("<i>Please input email here</i>")
return false;
}
});
$("input[type='text']").click(function(){
$("i").html("");
});
// form used
<form id="contact-form" method="post" action="">
<h2>Contact Us</h2>
<div class="row two-col">
<div class="first-col">
<label>First Name</label>
<input type="text" name="firstname" class="contact-firstname">
<i class="first-i"></i>
</div>
<div class="second-col">
<label>Last Name</label>
<input type="text" name="lastname" class="contact-lastname">
<i class="last-i"></i>
</div>
</div>
<div class="row two-col">
<div class="first-col">
<label>Email</label>
<input type="text" name="email" class="contact-email">
</div>
<div class="second-col">
<label>Phone</label>
<input type="text" name="phone" class="contact-phone">
</div>
</div>
<div class="row one-col">
<div class="single-col">
<label>Message</label>
<textarea name="message" class="contact-message"></textarea>
</div>
</div>
<div class="row one-col">
<div class="single-col">
<input type="submit" name="contactformsubmit" class="contact-submit">
<?php echo $msg; ?>
</div>
</div>
</form>
