Menu
I am having some problems implementing the jquery form validation script into my contact us form. Here is the HTML code for the form and the javascript form validation, I am using Jquery validation 1.13.1 here [url]http://jqueryvalidation.org/
[code=html]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<!– saved from url=(0014)about:internet –>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<title>contact us</title>
<link rel=”shortcut icon” href=”images/favicon.png” type=”image/png”/>
<link href=”style/global.css” rel=”stylesheet” type=”text/css” />
<link href=”style/default/layout.css” rel=”stylesheet” type=”text/css” />
<link href=”style/default/home.css” rel=”stylesheet” type=”text/css” />
<link rel=”stylesheet” href=”css/screen.css”>
<script src=”jquery.js”></script>
<script src=”jquery.validate.js”></script>
<script language=”javascript” type=”text/javascript” src=”js/gcws.js”></script>
<script language=”javascript” type=”text/javascript” src=”js/flashobject.js”></script>
<script language=”javascript” type=”text/javascript” src=”js/default/home.js”></script>
<script language=”javascript” type=”text/javascript” src=”js/customTracking.js”></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert(“submitted!”);
}
});
$().ready(function() {
// validate the comment form when it is submitted
$(“#commentForm”).validate();
// validate signup form on keyup and submit
$(“#signupForm”).validate({
rules: {
firstname: “required”,
lastname: “required”,
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: “#password”
},
email: {
required: true,
email: true
},
topic: {
required: “#newsletter:checked”,
minlength: 2
},
agree: “required”
},
messages: {
firstname: “Please enter your firstname”,
lastname: “Please enter your lastname”,
username: {
required: “Please enter a username”,
minlength: “Your username must consist of at least 2 characters”
},
password: {
required: “Please provide a password”,
minlength: “Your password must be at least 5 characters long”
},
confirm_password: {
required: “Please provide a password”,
minlength: “Your password must be at least 5 characters long”,
equalTo: “Please enter the same password as above”
},
email: “Please enter a valid email address”,
agree: “Please accept our policy”
}
});
// propose username by combining first- and lastname
$(“#username”).focus(function() {
var firstname = $(“#firstname”).val();
var lastname = $(“#lastname”).val();
if (firstname && lastname && !this.value) {
this.value = firstname + “.” + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $(“#newsletter”);
// newsletter topics are optional, hide at first
var inital = newsletter.is(“:checked”);
var topics = $(“#newsletter_topics”)[inital ? “removeClass” : “addClass”](“gray”);
var topicInputs = topics.find(“input”).attr(“disabled”, !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? “removeClass” : “addClass”](“gray”);
topicInputs.attr(“disabled”, !this.checked);
});
});
</script>
<style type=”text/css”>
div#container
{
width: 800px;
height: 1200px;
margin-top: 0px;
margin-left: 0px;
text-align: left;
}
</style>
<style type=”text/css”>
body
{
background-color: #FFFFFF;
color: #000000;
}
</style>
<style type=”text/css”>
a:active
{
color: #0000FF;
}
a:hover
{
color: #E49282;
}
</style>
<!–[if lt IE 7]>
<style type=”text/css”>
img { behavior: url(“pngfix.htc”); }
</style>
<![endif]–>
</head>
<body>
<div id=”container”>
<form class=”cmxform” id=”commentForm” method=”get” action=””>
<div id=”bv_” style=”margin:0; padding:0; position:absolute; left:493px; top:97px; width:969px; height:853px; text-align:left; z-index:1;”>
<img src=”images/bg2_01.jpg” alt=”” width=”817″ border=”0″ align=”top” id=”” style=”width:969px;height:853px;”></div>
<div id=”bv_” style=”margin:0; padding:0; position:absolute; left:493px; top:950px; width:969px; height:256px; text-align:left; z-index:2;”>
<img src=”images/bv01003_01_01_01.png” id=”” alt=”” align=”top” border=”0″ style=”width:969px;height:245px;”></div>
<div id=”bv_” style=”margin:0; padding:0; position:absolute; left:1196px; top:67px; width:46px; height:18px; text-align:left; z-index:18;”>
<h4><b>HOME</b></h4></div>
<div id=”bv_” style=”margin:0; padding:0; position:absolute; left:1247px; top:67px; width:46px; height:18px; text-align:left; z-index:18;”>
<h4><b>HOME</b></h4></div>
<div id=”bv_” style=”margin:0; padding:0; position:absolute; left:1299px; top:67px; width:46px; height:18px; text-align:left; z-index:18;”>
<h4><b>HOME</b></h4></div>
<div id=”bv_” style=”margin:0; padding:0; position:absolute; left:1352px; top:67px; width:46px; height:18px; text-align:left; z-index:18;”>
<h4><b>HOME</b></h4></div>
<div id=”bv_” style=”margin:0; padding:0; position:absolute; left:1407px; top:67px; width:46px; height:18px; text-align:left; z-index:18;”>
<h4><b>HOME</b></h4></div>
<div id=”bv_” style=”margin:0; padding:0; position:absolute; left:494px; top:97px; width:197px; height:853px; text-align:left; z-index:10;”>
<img src=”images/leftbar.jpg” id=”” alt=”” align=”top” border=”0″ style=”width:197px;height:853px;”></div>
<div id=”bv_” style=”margin:0; padding:0; position:absolute; left:501px; top:116px; width:132px; height:130px; text-align:left; z-index:32;”>
<h1>Quick links</h1>
<h3><li style=”list-style-type: none;”>About us</li>
<li style=”list-style-type: none;”>Careers</li></a>
<li style=”list-style-type: none;”>Mission Statement</li>
</h3></div>
<div id=”bv_” style=”margin:0; padding:0; position:absolute; left:708px; top:113px; width:695px; height:827px; text-align:left; z-index:13;”>
<h1><b>Contact Us</b></h1><br>
<h3><br>
<p>
<b>General Enquiry</b>: <br>
<b>Help</b>
:<br>
<b>Request quote</b>
: <br>
</h3>
<input type=”text” id=”firstname” style=”position:absolute; left:10px; top:258px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:2″ name=”firstname” value=””>
<div id=”bv_Text2″ style=”margin:0; padding:0; position:absolute; left:10px; top:238px; width:71px; height:16px; text-align:left; z-index:3;”>
<font style=”font-size:13px” color=”#000000″ face=”Arial”>First Name</font></div>
<input type=”text” id=”Editbox2″ style=”position:absolute; left:10px; top:311px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:4″ name=”Lastname” value=””>
<div id=”bv_Text3″ style=”margin:0; padding:0; position:absolute; left:10px; top:287px; width:71px; height:16px; text-align:left; z-index:5;”>
<font style=”font-size:13px” color=”#000000″ face=”Arial”>Last Name</font></div>
<div id=”bv_Text4″ style=”margin:0; padding:0; position:absolute; left:10px; top:342px; width:71px; height:16px; text-align:left; z-index:6;”>
<font style=”font-size:13px” color=”#000000″ face=”Arial”>Email</font></div>
<input type=”text” id=”Editbox3″ style=”position:absolute; left:10px; top:362px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:7″ name=”Email” value=””>
<div id=”bv_Text5″ style=”margin:0; padding:0; position:absolute; left:10px; top:397px; width:158px; height:16px; text-align:left; z-index:8;”>
<font style=”font-size:13px” color=”#000000″ face=”Arial”>Telephone number</font></div>
<input type=”text” id=”Editbox4″ style=”position:absolute; left:10px; top:419px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:9″ name=”Telephone” value=””>
<div id=”bv_Text6″ style=”margin:0; padding:0; position:absolute; left:10px; top:452px; width:254px; height:16px; text-align:left; z-index:10;”>
<font style=”font-size:13px” color=”#000000″ face=”Arial”>What is your question or topic regarding?*</font></div>
<div style=”position:absolute; left:10px; top:475px; width:270px; height:24px; border:1px #C0C0C0 solid; z-index:11″>
<select name=”Combobox1″ size=”1″ id=”Combobox1″ style=”width:100%; height:100%; border-width:0px; font-family:’Calibri’; font-size:10px;”>
<select id=”topic” name=”topic” title=”Please select a topic” required>
<option></option>
<option>topic1</option>
<option>topic2</option>
<option>topic3</option>
</select>
</div>
<textarea name=”TextArea1″ id=”TextArea1″ style=”position:absolute; left:10px; top:530px; width:271px; height:148px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:12″ rows=”6″ cols=”29″></textarea>
<div id=”bv_Text7″ style=”margin:0; padding:0; position:absolute; left:10px; top:505px; width:254px; height:16px; text-align:left; z-index:13;”>
<font style=”font-size:13px” color=”#000000″ face=”Arial”>Please tell us what’s on your mind:*</font></div>
<input type=”submit” id=”submit” name=”Button1″ value=”Submit” style=”position:absolute; left:208px; top:700px; width:75px; height:24px; font-family:Arial; font-size:13px; z-index:14″>
</form>
</body>
</html>