Form Validation Name, Phone, Email
references:
http://stackoverflow.com/questions/46155/validate-email-address-in-javascript
http://stackoverflow.com/questions/4338267/validate-phone-number-with-javascript
HTML:
<form id="homeform" method="post" action="http://popbetaserver.com/projects/pp/beta/?page_id=208" onsubmit="return validateForm()">
<div class="col-md-6 col-sm-6 fname">
<input class="text" type="text" name="fname" placeholder="First Name*" >
</div>
<div class="col-md-6 col-sm-6 lname">
<input type="text" class="text" name="lname" placeholder="Last Name*">
</div>
<div class="col-md-6 col-sm-6 mobile">
<input type="text" class="text" name="mobile" placeholder="Mobile Phone*" >
</div>
<div class="col-md-6 col-sm-6 email">
<input type="text" class="text" name="email" placeholder="Email*">
</div>
<div class="col-md-12">
<input class="submit" type="submit" value="Order Card">
</div>
<div class="col-md-6 col-sm-6" style="padding-top: 2px;">
<p>Items marked with * are mandatory.</p>
</div>
</form>
JAVASCRIPT:
<script>
function validateForm() {
var fname = document.forms["homeform"]["fname"].value;
var lname = document.forms["homeform"]["lname"].value;
var mobile = document.forms["homeform"]["mobile"].value;
var email = document.forms["homeform"]["email"].value;
if (fname == null || fname == "") {
alert("First Name must be filled out");
return false;
}
if (lname == null || lname == "") {
alert("Last Name must be filled out");
return false;
}
if (mobile == null || mobile == "" || validatePhone(mobile) == false ) {
alert("Please Enter a valid Mobile Number");
return false;
}
if (email == null || email == "" || validateEmail(email) == false ) {
alert("Please Enter a valid Email Address");
return false;
}
}
function validateEmail(email) {
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
return re.test(email);
}
function validatePhone(mobile) {
var re = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im;
return re.test(mobile);
}
</script>