Form Validation in jquery

<html>
<head>

<!– Load jQuery and the validate plugin –>
<script src=”http://code.jquery.com/jquery-1.9.1.js”></script&gt;
<script src=”http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js”></script&gt;

<!– jQuery Form Validation code –>
<script>

// When the browser is ready…
$(function() {

// Setup form validation on the #register-form element
$(“#register-form”).validate({

// Specify the validation rules
rules: {
valuation_name: “required”,
valuation_email: {
required: true,
email: true
},
valuation_phone: “required”,
valuation_address: “required”,
/*password: {
required: true,
minlength: 5
},
agree: “required”*/
},

// Specify the validation error messages
messages: {
valuation_name: “Please enter your first name”,
/*password: {
required: “Please provide a password”,
minlength: “Your password must be at least 5 characters long”
},*/
valuation_email: “Please enter a valid email address.”,
valuation_phone: “Please enter your Phone Number.”,
valuation_address: “Please enter your Address.”
},

submitHandler: function(form) {
form.submit();
}
});

});

</script>
</head>
<body>

<div class=”prop-content” id=”request”>
<form method=”post” action=”” id=”register-form”>
<fieldset class=”enquiryform”>
<h3>Request a Valuation</h3>
<p>Fill out the form below and we’ll get in touch with you to arrange a valuation.</p>

<div class=”left”>
<label for=”valuation_name”>Name</label>
<label for=”valuation_email”>Email</label>
<label for=”valuation_phone”>Telephone</label>
<label for=”valuation_address”>Your Address</label>
<label for=”valuation_message” class=”extra-comment”>Extra Comments</label>
</div>
<div class=”right”>
<input type=”text” id=”valuation_name” name=”valuation_name” value=”” placeholder=”Please enter your full name here” class=”populate”>
<input type=”text” id=”valuation_email” name=”valuation_email” value=”” placeholder=”Please enter your email address here” class=”populate”>
<input type=”text” id=”valuation_phone” name=”valuation_phone” value=”” placeholder=”Please enter your telephone number here” class=”populate”>

<input type=”text” id=”valuation_address” name=”valuation_address” value=”” placeholder=”Please enter your address here” class=”populate”>

<textarea cols=”20″ rows=”4″ name=”valuation_message” placeholder=”Please enter your comments and enquiries here” id=”valuation_message” class=”populate “></textarea>

<button type=”submit” class=”button-large submit-btn submit-button site-color2″ >Send Request</button>
</div>
</fieldset>
</form>
</div>

<style>

.enquiryform h3 {
color: #1e515e;
text-shadow: none;
}
.enquiryform > p {
line-height: 18px;
margin: 0 0 20px;
}

.enquiryform .left {
border-right: 1px dotted #d1d1d1;
display: block;
float: left;
margin-right: 40px;
width: 160px;
}
#viewing_form .right {
float: left;
width: 370px;
}

#viewing_form .enquiryform .left label {
height: 27px;
margin: 20px 0 10px;
padding: 11px 0 0;
}
.enquiryform .left label {
clear: left;
display: block;
font-size: 16px;
margin: 30px 0 42px;
text-align: right;
width: 150px;
}

#viewing_form .right input, #viewing_form .right select {
display: block;
}
.enquiryform .right input, #viewing_form .right select {
border: 1px solid #ccc;
color: #999999;
display: block;
font-size: 14px;
height: 40px;
margin: 20px 0 10px;
padding: 5px;
width: 340px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.right table#times tbody tr td input {
height: 15px;
margin: 0;
width: 20px;
}
.right table#times input {
border: medium none;
}

.enquiryform .right textarea {
border: 1px solid #ccc;
color: #999999;
display: block;
font-size: 14px;
height: 100px;
margin: 20px 0 10px;
padding: 10px;
resize: none;
width: 330px;
}

.prop-content a {
display: inline-block;
margin: 5px;
}
.site-color2 {
background-color: #85a60c;
color: white !important;
text-shadow: 1px 1px 1px #333 !important;
}
.submit-btn {
border: medium none;
border-radius: 5px;
height: 30px;
line-height: 30px;
margin-left: 15em;
text-align: center;
text-decoration: none;
width: 110px;
}
.submit-btn:hover{
background-color: #85a60c;
color: white !important;
text-shadow: 1px 1px 1px #333 !important;
}

.error {
color: red;
}
.populate.error {
border: 1px solid red !important;
}
</style>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s