Okay, so I have the form set to my PHP page. I also have the submit button onsubmit set to my validation javascript. What happens is that it goes directly to my php page and does not validate the input? What am I missing? Do I have this set up right? If I remove the php file from the form the javascript validate works fine. It is trying to use the php and javascript together that drives me insane.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link rel="stylesheet" type="text/css" href="styles/styles_Final.css"/>
<title>contact.html</title>
<script type= "text/javascript" src = "scripts/validator.js"></script>
</head>
<div id="right-cont">
<form name = "contact_Us" action="http://nova.umuc.edu/cgi-bin/cgiwrap/ct386a28/eContact.php" method = "post">
<div id="style2">
<p>Please enter contact information below:</p>
</div>
<div class="style7">
<label>First Name: </label>
<br /><input type="text" name = "firstName" id="firstName" tabindex="1"
style="width: 176px" />
</div>
<div class="style7">
<label>Middle Name: </label>
<br /><input type="text" name = "middleName" id ="middleName" tabindex="2"
style="width: 176px" />
</div>
<div class="style7">
<label>Last Name: </label>
<br /><input type="text" name = "lastName" id ="lastName" tabindex="3"
style="width: 176px" />
</div>
<div class="style8">
<label>Questions and/or comments: </label>
<br /> <textarea name = "comment" id = "comment" rows = "10" cols = "60"></textarea>
</div>
<div class =" buttons">
<input type="submit" value="SUBMIT" onclick = "return validate()"/><input type="reset" value="CLEAR"/> <br />
</div>
</div>
</form>
</div>
**************JAVASCRIPT**************************
function validate() {
//create references
var fName;
var mName;
var lName;
var email;
var phone;
fName = document.getElementById('firstName').value;
mName = document.getElementById('middleName').value;
lName = document.getElementById('lastName').value;
email = document.getElementById('email').value;
//validate the phone number
phone = document.getElementById('phone').value;
var boolean = isPhoneNumber(phone);
if (!boolean)
{
alert("Please enter valid phone number format: ddd-ddd-dddd.");
return false;
}
//validate the email address
email_Val()
//validate the first name
var fN=document.forms["contact_Us"]["firstName"].value
if (fN==null || fN=="")
{
alert("Please fill in first name.");
return false;
}
//validate the last name
var lN=document.forms["contact_Us"]["lastName"].value
if (lN==null || lN=="")
{
alert("Please fill in last name.");
return false;
}
}
function isPhoneNumber(phone)
{
var str = /^\(?[2-9]\d{2}[\)\.-]?\s?\d{3}[\s\.-]?\d{4}$/
return str.test(phone);
}
function email_Val()
{
var eM=document.forms["contact_Us"]["email"].value
var x=eM.indexOf("@");
var y=eM.lastIndexOf(".");
if (x<1 || y<x+2 || y+2>=eM.length)
{
alert("Please enter a valid e-mail address");
return false;
}
}
Here’s a link to a working version of your code: JSFiddle link
The easiest way to correct it is just to make sure you included the javascript in the
headof your document, whether it’s a link to an external file (preferably) or just inside the HTML. Then, check for syntax errors in your javascript, this might sometimes cause the code not to execute properly (or at all).In your case, you did also try to access fields that did not exist in the code, which caused an error, and when an error is thrown the browser stops validation and just submits the form.
Here’s the working version of your code: