<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Contact Form</title>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body class="well well-sm">
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-0.5">
<form class="form-horizontal">
<div class="col-md-12">
<div class="col-md-4"></div>
<div class="col-md-4">
<h1>Contact Us</h1>
</div>
<div class="col-md-4"></div>
</div>
<hr>
<!-- Name input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Name</label>
<div class="col-md-9">
<input id="txtName" name="name" tabindex="1" type="text" maxlength="100" title="Enter Your Name" placeholder="Your name" class="form-control">
</div>
</div>
<!-- City input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">City</label>
<div class="col-md-9">
<input id="txtCity" name="city" tabindex="2" type="text" maxlength="100" title="Enter Your City" placeholder="Your city" class="form-control">
</div>
</div>
<!-- Email input-->
<div class="form-group">
<label class="col-md-3 control-label" for="email">Your E-mail</label>
<div class="col-md-9">
<input id="txtEmail" name="email" tabindex="3" type="text" maxlength="100" title="Enter Your E-mail" placeholder="Your email" class="form-control">
</div>
</div>
<!-- DOB input-->
<div class="form-group">
<label class="col-md-3 control-label" for="email">Your Date Of Birth</label>
<div class="col-md-9">
<input id="txtDOB" name="dob" tabindex="4" type="date" maxlength="10" title="Enter Your Date Of Birth" placeholder="Your Date Of Birth" class="form-control">
</div>
</div>
<!-- Contact number input-->
<div class="form-group">
<label class="col-md-3 control-label" for="email">Your Contact number</label>
<div class="col-md-9">
<input id="txtContactNumber" name="contactnumber" title="Enter Your Contact number" tabindex="5" type="number" maxlength="10" placeholder="Your Contact number" class="form-control">
</div>
</div>
<!-- Message body -->
<div class="form-group">
<label class="col-md-3 control-label" for="message">Your message</label>
<div class="col-md-9">
<textarea class="form-control" id="txtMessage" title="Enter Your message" maxlength="150" tabindex="6" name="message" placeholder="Please enter your message here..." rows="5"></textarea>
</div>
</div>
<!-- Form actions -->
<div class="form-group">
<div class="col-md-12 text-right">
<button type="submit" class="btn btn-primary btn-lg" title="Click here to submit the form " tabindex="7" id="btnSubmit" >Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnSubmit').click(function () {
if (validateForm()) {
if (SubmitData()) {
alert('Data save succssfully !!!');
}
} else {
return false;
}
});
});
function SubmitData() {
alert('Server side code call ');
var saveStatus = false;
if (saveStatus)
return true;
else
return false;
}
function validateForm()
{
var status =false;
if ($('#txtName').val() == '')
{
$('#txtName').focus();
alert('Name Field can not be blank');
}else if($('#txtName').val().length>100)
{
$('#txtName').focus();
alert('Name Field must not grater than 100');
}
else if ($('#txtCity').val() == '') {
$('#txtCity').focus();
alert('City Field can not be blank');
} else if ($('#txtCity').val().length > 100) {
$('#txtCity').focus();
alert('City Field must not grater than 100');
}
else if ($('#txtEmail').val() == '') {
$('#txtEmail').focus();
alert('Email Field can not be blank');
} else if ($('#txtEmail').val().length > 100) {
$('#txtEmail').focus();
alert('Email Field must not grater than 100');
}
else if ($('#txtDOB').val() == '') {
$('#txtDOB').focus();
alert('DOB Field can not be blank');
} else if ($('#txtDOB').val().length > 10) {
$('#txtDOB').focus();
alert('DOB Field must not grater than 10');
}
else if ($('#txtContactNumber').val() == '') {
$('#txtContactNumber').focus();
alert('Contact number Field can not be blank');
} else if ($('#txtContactNumber').val().length > 10) {
$('#txtContactNumber').focus();
alert('Enter 10 digit contact number ');
} else if ($('#txtMessage').val() == '') {
$('#txtMessage').focus();
alert('message Field can not be blank');
} else if ($('#txtMessage').val().length > 150) {
$('#txtMessage').focus();
alert('DOB Field must not grater than 150');
}else {
status = true;
}
return status;
}
</script>
</body>
</html>
