Jquery Contact Form
In this tutorial we will be making a
contact form using jquery to validate it live so no page refresh is required.
Start by typing up the HTML for the layout
<div id="wrapper">
<h1>Jquery Contact Form</h1>
</div>
and add the styling for it
body
{
background-color: #3c3c3c;
margin: 0px;
color: #666666;
font-family: arial;
font-size: 10pt;
}
h1
{
margin: 0px;
font-size: 14pt;
font-weight: normal;
margin-bottom: 10px;
color: #1b75db;
}
#wrapper
{
width: 480px;
margin-left: auto;
margin-right: auto;
background-color: #efefef;
border: 1px solid #212121;
padding: 10px;
margin-top: 100px;
}
and now we have the title and the
basic shape lets add in the form
<form id="contactForm"
action="" method="post">
<div style="float: left">Name:</div><div
style="float: right;" id="nameError">Name must be
atleast 2 characters</div>
<div style="clear:both"></div>
<input type="text" id="name" maxlength="64"
name="name" />
<div style="float: left">Email:</div><div
style="float: right;" id="emailError">The email adress
is not correct</div>
<div style="clear:both"></div>
<input type="text" id="email" maxlength="128"
name="email" />
<div style="float: left">Message:</div><div
style="float: right;" id="messageError">Message is too
short</div>
<div style="clear:both"></div>
<textarea id="message" rows="10" cols="56"
name="message"></textarea>
<input id="submit" type="submit" name="submit"
value="submit" />
</form>
okay this works by having the error
messages hidden and next to the name of the field by using floats and then
clearing them and then showing the fields. We will use JavaScript to flag up
when a form is invalid and show the message
Now style the form like so
input
{
margin-bottom: 5px;
}
#contactForm #name,#contactForm #email,#contactForm #message
{
background-color: #ffffff;
border: 1px solid #cacaca;
color: #757474;
width: 478px;
height: 20px;
font-size: 11pt;
}
#contactForm #message
{
height: 120px;
}
#contactForm #nameError,#contactForm #emailError,#contactForm #messageError
{
display: none;
color: #ec838d;
}
#contactForm #submit
{
margin-top: 5px;
background-image: url('button.png');
height: 25px;
width: 100px;
border: 0px;
margin-left: 380px;
color: #666666;
}
okay now we get the part you want
the javascript so first we need to store the data from the fields in variables
like so
$(function() {
var contactForm = $('#contactForm');
var name = $("#name");
var email = $("#email");
var message = $("#message");
var error = $("#error");
});
right so we store form and its
fields. for all the next javascript put it at the end of this function but
still inside it. Next we need to make some functions that check the values and
return true or false based upon what was entered like so
function validateName()
{
if (name.val().length < 2)
{
$("#nameError").show();
return false;
}
else
{
$("#nameError").hide();
return true;
}
}
function validateEmail()
{
if
(email.val().search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)
!= -1)
{
$("#emailError").hide();
return true;
}
else
{
$("#emailError").show();
return false;
}
}
function validateMessage()
{
if (message.val().length < 2)
{
$("#messageError").show();
return false;
}
else
{
$("#messageError").hide();
return true;
}
}
these functions will be constantly
called which we will look at next. The validate name and message functions work
in the same way they check the length of the string and show the error message
if the character length is too small and hide it if it isn't as well as
returning true or false. The email function checks if the email address is
valid does the same as the other two.
Lastly we need to call the the functions like so
name.blur(validateName);
email.blur(validateEmail);
message.blur(validateMessage);
name.keyup(validateName);
email.keyup(validateEmail);
message.keyup(validateMessage);
contactForm.submit(function(){
if (validateName() & validateEmail() & validateMessage())
{
return true;
}
else
{
return false;
}
});
The blur
method runs when we click off the target element so when we click of the field,
and the keyUp is when a key is pressed and then released so after we type in a
character.
Lastly an if statement is in place to call the functions when the form submit
button is pressed.
