jcadima
5/23/2015 - 9:55 PM

Form Validation Name, Phone, Email

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>