|
|
Here I am providing the simple jquery with validation and sending data to php with source code. Also I included the anti-spamming math calculation, which will be more helpful, provided php program is used.
You may change the code and design as you wish. If you use this code, kindly intimate by sending your comments for betterment of this website.
put style & script code in header
Put form code in body
|
<![CDATA[
<style type="text/css">
#form{ margin:0 auto;
padding:10px;border:solid 2px #b7ddf2;
background:#f5fffa;
width:245px; height: 350px;
/*behavior: url(css/border-radius.htc); */
-webkit-border-radius:6px; -moz-border-radius:8px;
border-radius:8px; -khtml-border-radius: 8px;}/*
}
/* ----------- fc ----------- */
#fc{
font-family:"Lucida Grande", "Lucida Sans Unicode",
Verdana, Arial, Helvetica, sans-serif; font-size:12px;
}
#fc h4{font-size:20px;margin:0px 0px 2px 0px;
font-weight:bold; text-align:center;
}
#fc .k{font-size:9px; line-height: 10px;padding-bottom:2px; text-align:center;
color: blue; margin-bottom:11px;text-align:justify;
}
#fc label{display:block;font-weight:bold;
text-align:right; width:100px;float:left;
font-size:14px;
}
#fc .small{color:red;font-size:9px;
}
#fc input{float:left;font-size:12px;
padding:3px 3px; border:solid 1px #aacfe4;
width:130px; margin:2px 0 10px 10px;
}
#fc textarea{float:left;font-size:12px;
padding:3px 3px; border:solid 1px #aacfe4;
width:130px; margin:2px 0 10px 10px;height: 57px;
}
#btn{clear:both;font-size:13px;font-weight:bold;
text-align:center;
}
#small{ font-weight:bold;color: red;
}
#error{ font-weight:bold;
text-align:left;
height: 20px;
color: red;font-size:15px;
}
</style>
]]>
Following in the Jquery of the form
<![CDATA[
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function Submit(e){
e.preventDefault();
// You will have to submit your form using ajax.
var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
var sumRegex = /^[6]$/;
var formemail = $("#email").val();
var name = $("#name").val();
var place = $("#place").val();
var email = $("#email").val();
var web = $("#web").val();
var message = $("#message").val();
var sum = $("#sum").val();
// Check for errors in each filed
if($("#name").val() == "" ){
$("#name").focus();
$("#error").html("Enter the Name.");
return false;
}
else if($("#place").val() == "" ){
$("#place").focus();
$("#error").html("Enter the Place.");
return false;
}
else if($("#email").val() == "" ){
$("#email").focus();
$("#error").html("Enter the email.");
return false;
}
else if(!emailRegex.test(formemail)){
$("#email").focus();
$("#error").html("Enter the valid email.");
return false;
}
else if($("#web").val() == "" ){
$("#web").focus();
$("#error").html("Enter the subject.");
return false;
}
else if($("#message").val() == "" ){
$("#message").focus();
$("#error").html("Enter message.");
return false;
}
else if($("#sum").val() == "" ){
$("#sum").focus();
$("#error").html("Enter sum.");
return false;
}
else if(!sumRegex.test(sum)){
$("#sum").focus();
$("#error").html("Enter correct sum.");
return false;
}
else if($(name != '' && place != '' && email != '')){
$("#error").html("Form submitted successfully.")
$("#form")[0].reset();
// Returns successful data to php.
$.post("http://www.xyz.php", {name: name, place: place, email: email,
web: web, message: message},
function(data)
{
$("#form").append(data);
});
}
}
</script>
]]>
Following in the HTML form code
<![CDATA[
<form id="form" name="form" method="post" action="http://www.xyz.php">
<div id="fc">
<h4>CONTACT FORM</h4>
<span class="k"> Kindly fill and submit the feed-back form with valid E-mail.
</span><br><hr>
<div id="error"></div>
<label>Full Name: <span class="small">*</span> </label>
<input type="text" name="name" id="name" />
<label>Place: <span class="small">*</span> </label>
<input type="text" name="place" id="place">
<label>Email-id: <span class="small">*</span> </label>
<input type="text" name="email" id="email">
<label>Web site (If): </label>
<input type="text" id="web"><br><br>
<label>Message: <span class="small">*</span></label>
<div class="area">
<textarea name="message" id="message" cols="23" rows="5"></textarea>
</div>
</div>
Enter sum of <b> 2 + 4 = ? </b>
<input type="text" name="sum" id="sum" maxlength="3" size="1"> <br><br>
<div id="btn">
<input type="submit" id="submit" value="SUBMIT" onClick="Submit(event)" />
</div>
</form>
]]>
No comments:
Click Here To add Comment
Post a Comment