Create Contact Us Form Validate Fields Using Javascript

Create Contact Us Form Validate Fields Using Javascript Web-development (jquery) Create Contact Us Form Validate Fields Using Javascript

Create Contact Us Form Validate fields using javascript

//CSS
<style>
#main{
float:left;
display:inline;
width:470px;
margin-left:55px;
}
form{
 margin:1em 0;
 }
fieldset{
 border:none;
 margin:0;
 background:#f1f1f1;
 border:5px solid #e7e7e7;
 padding:1em 15px; 
 } 
legend{
 display:none;
 } 
label{
 float:left;
 clear:both;
 width:120px;
 margin-right:10px;
 margin-top:5px;
 text-align:right;
 }
input, textarea{
 width:250px;
 border:1px solid #ccc;
 padding:5px;
 margin:5px 0;
 } 
textarea{
 height:80px;
 overflow:auto;
 } 
form p{
 clear:both;
 margin:0;
 }
form h3{
 margin:1em 0 .5em 0;
 font-size:25px;
 } 
button{
 border:none;
 width:171px;
 height:33px;
 line-height:33px;
 text-align:center; 
 padding:0;
 margin:0;
 margin-left:15px;
 background:url(images/bg_button.gif) no-repeat 0 0;
 color:#555;
 font-weight:bold;
 font-size:14px;
 cursor:pointer; 
 } 
.submit{
 text-align:right;
 height:52px;
 margin:1em 0; 
 }
span.error{
 display:block;
 color:#a50000;
 font-weight:bold;
 margin-left:130px;
 }

</style>

Javascript

//Javascript
<script type="text/javascript" src="js/jquery.js"></script>
<script>
this.form = function(){
this.validate = function(name, email, message){
$("span.error").remove();
var valid = true;
//name
if(name == "") {
 error($("#name"),"Please tell us your name.")
 valid = false;
};
//email
if(!checkEmail(email)) {
 error($("#email"),"We need a valid email address.")
 valid = false;
}; 
//messgae
if(message == "") {
 error($("#message"),"Please write a message.")
 valid = false;
}; 
return valid;
};

this.checkEmail = function(str){
 var regEx = /^[^@]+@[^@]+.[a-z]{2,}$/;
 return (str.search(regEx) != -1);
};

this.error = function(obj,text){
var parent = $(obj).parent();
parent.append("<span class=\"error\">"+ text +"</span>");
$("span.error",parent).hide().show("fast");
};

$("#contactForm button").click(function(){ 
var name = $("#name").val();
var email = $("#email").val(); 
var message = $("#message").val(); 
if(validate(name, email, message)) return true;
return false;
});
};
this.init = function() {
form();
};

$(document).ready(function(){
init();
});
</script>

HTML Form

//HTML form
<div>
 <h2>Contact us</h2>
 <p>Nunc volutpat nisi nec leo. Fusce accumsan, mi ac posuere rhoncus,
 arcu orci tristique leo, vitae consequat.</p>
 <form action="/" method="post">
 <fieldset><legend>Contact form</legend>
 <p>
 <label for="name">Name</label>
 <input type="text" name="name" size="30" />
 </p>
 <p>
 <label for="email">Email</label>
 <input type="text" name="email" size="30" />
 </p> 
 <p>
 <label for="message">Message</label>
 <textarea name="message" rows="10" cols="30"></textarea>
 </p> 
 </fieldset>
 <p>
 <button type="submit">Send</button>
 </p> 
 </form>
</div>

Downlaod

http://dl.dropbox.com/u/3293191/r-ednalan/contact_form_validatefields.zip

Posted by Hodie J