My web page is not running my JavaScript validation code
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" tab开发者_如何学Cindex="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 head of 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:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>contact.html</title>
<script type="text/javascript">
function runValidate()
{
//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;
//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;
}
}
</script>
</head>
<body>
<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 runValidate();"/><input type="reset" value="CLEAR"/> <br />
</div>
</div>
</form>
</div>
Are you positive the javascript which contains the validate() function is included in your php? Do a view source on the page and double check.
Try folowing code for the submit button:
<input type="submit" value="SUBMIT" onclick = "validate()"/><input type="reset" value="CLEAR"/> <br />
I've noticed that you have some syntax errors in your Javascript code, but also you are trying to access fields that are not declared in the HTML (such as phone and email). I've modified your Javascript, and it does what I think you expect that it should be doing:
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;
//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;
}
}
加载中,请稍侯......
精彩评论