Validation is an important and required functionality for any application. Create a simple validation form using jQuery
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Form validate</title>
<link href="css/style.css" rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<h1>Get A Quote</h1>
<form action='contact.php' method="POST">
<p>*Name:</p>
<input id="name" type="text" name='name'>
<br>
<br>
<p>Phone:
<br>
</p>
<input id="phone" type="text" name="phone">
<br>
<br>
<p>*Email:</p>
<input id="email" type="text" name="email">
<br>
<br>
<p>Describe your project:</p>
<textarea id="project" name="message" rows="6" cols="55"></textarea>
<br>
<br>
<br>
<input class='button send' type="submit" value="Send">
</form>
<h5>* Required fields</h5>
</body>
<script src=js/val.js></script>
</html>
JS file val.js
jQuery(document).ready(function($) {
$(document).on('click', '.button', function(e) {
var errors = false;
var emailReg = /^([a-zA-Z0-9\\.]+)@([a-zA-Z0-9\\-\\_\\.]+)\.([a-zA-Z0-9]+)$/i;
var numberfilter = /^[0-9-+]+$/;
$(".errors").remove();
if ($("#name").val() === "") {
$("#name").after("<span class='errors'> Missing Name </span> ")
errors = true;
}
if ($("#phone").val() === "") {
$("#phone").after("<span class='errors'> Missing Name </span> ")
errors = true;
} else if (!numberfilter.test($("#phone").val())) {
$("#phone").after("<span class='errors'> Not a valid phone number </span> ")
errors = true;
/*validate number field has entry and is a valid*/
}
if ($("#email").val() === "") {
$("#email").after("<span class='errors'> Missing Email </span>")
errors = true;
} else if (!emailReg.test($("#email").val())) {
$("#email").after("<span class='errors'> Not a valid email </span> ")
errors = true;
/*validate email field has entry and is a valid*/
}
if (errors === true) {
return false;
} else { return true; }
})
})