HTML/CSS
JavaScript Contact Form Validation
November 30, 2018
3 min read
1 views
Description:
JavaScript Contact Form Validation HTML Contact Form Form Beautifull Design For the backend designer.who have for need Contact Form.Form need for Contact admin people this is very and Attractive Design also has the form validation.it has full JavaScript form Validation.
Form name: Contract Form with JavaScript Form ValidationCSS : BootstrapLicense: Open Source.Compatible Browsers: Google Chrome, Firefox, Safari, IE 10, Opera etc.High Resolution: Yes.Layout: Fluid Responsive Layout.
You can view another article :
Step-1
Create HTML File "index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<title>Services</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="container"><br><br>
<h1 class="text-center">Contact Us</h1><br>
<h3 id="success"class="text-success"></h3>
<div style="background:lightblue;padding:20px;">
<form action="#" method="post">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr" name="username">
<span class="text-danger" id="name-error"></span>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email">
<span class="text-danger" id="email-error"></span>
</div>
<div class="form-group">
<label for="subject">Subject:</label>
<input type="subject" class="form-control" id="subject" name="subject">
<span class="text-danger" id="subject-error"></span>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea class="form-control" rows="5" id="message"></textarea>
<span class="text-danger" id="message-error"></span>
</div>
</form>
<button id="submit" class="btn btn-primary">Send</button>
</div>
</div>
<script>
$("#submit").click(function(){
var name= $("#usr").val();
var email= $("#email").val();
var subject= $("#subject").val();
var message= $("#message").val();
if(name==""){
$("#name-error").html("Please write your name");
}else{
$("#name-error").html("");
}
if(email==""){
$("#email-error").html("Please write your Email");
}else{
$("#email-error").html("");
}
if(subject==""){
$("#subject-error").html("Please write your Subject of message");
}else{
$("#subject-error").html("");
}
if(message ==""){
$("#message-error").html("Please write your Message");
}else{
$("#message-error").html("");
}
if(name!="" && email!="" && subject!="" && message !=""){
$("#success").html("hello!! "+name+", Your message is sent");
}
});
</script>
</body>
</html>
Downlaod Full Source Code :
[button color="green" size="medium" link="http://learncoading.com/wp-content/uploads/2018/11/Contact-form.zip" icon="" target="true"]Downlaod[/button]