Contact Form using validation to send to phpmailer
- by Jaciinto
This is the first time I have ever wrote anything in java script so I am unsure if I am doing anything right. I used yensdesign.com tutorial as an example and went from there but cant get it to submit the var to validation.php and also can not get it to at the end give me congrats message for it passing. Any help would be greatly appreciated.
//Form
$(document).ready(function(){
//global vars
var form = $("#contactForm");
var title = $("#contactTitle");
var name = $("#contactName");
var email = $("#contactEmail");
var message = $("#contactMessage");
//On blur
name.blur(validateName);
email.blur(validateEmail);
title.blur(validateTitle);
//On key press
name.keyup(validateName);
email.keyup(validateEmail);
title.keyup(validateTitle);
message.keyup(validateMessage);
//validation functions
function validateEmail()
{
//testing regular expression
var a = $("#contactEmail").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
//if it's valid email
if(filter.test(a))
{
email.removeClass("contactError");
return true;
}
//if it's NOT valid
else
{
email.addClass("contactError");
return false;
}
}
function validateName()
{
//if it's NOT valid
if(name.val().length < 4)
{
name.addClass("contactError");
return false;
}
//if it's valid
else
{
name.removeClass("contactError");
return true;
}
}
function validateTitle()
{
//if it's NOT valid
if(title.val().length < 4)
{
title.addClass("contactError");
return false;
}
//if it's valid
else
{
title.removeClass("contactError");
return true;
}
}
function validateMessage(){
//it's NOT valid
if(message.val().length < 10){
message.addClass("contactError");
return false;
}
//it's valid
else{
message.removeClass("contactError");
return true;
}
}
var dataString = 'name='+ name + '&email=' + email + '&number=' + number + '&comment=' + comment;
function valid ()
{
if(validateName() & validateEmail() & validateTitle() & validateMessage())
{
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('#contactForm').html("<div id='message'></div>");
$('#message').html("<h2>Thanks!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
else
{
return false;
}
}
});
