Debugging Javascript
I can't figure out what's wrong with my code; the JavaScript does not run at all. I've tried to use Firebug but it acts like there is no script on the page. What is the best way to debug JavaScript? Does anyone see what's wrong with this?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="estimates.js"></script>
<title>Pasha the Painter Estimates</title>
<link href="painter.css" rel="stylesheet" type="text/css" />
<link href="favicon.ico" rel="icon" type="images/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<h1 id="logo"><img src="painterlogo.gif" alt="Pasha the Painter" width="620" height="120" /></h1>
<div id="leftcolumn">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a hef="estimates.html">Estimates</a></li>
</ul>
</div>
<div id="rightcolumn">
<p>Request a Free Estimate.</p>
<form method="post" onsubmit="return validateForm()"
action="http://webdevfoundations.net/scripts/painter.asp">
<table>
</tr>
<tr>
<td>
<label for="name" >Name: *</label>
</td>
<td>
<input type="text" name="name" id="name" maxlength="80" size="30" />
</td>
</tr>
<tr>
<td>
<label class="labelCol for="email">E-mail: *</label>
</td>
<td>
<input type="text" name="email" id="email" maxlength="80" size="30" />
</td>
</tr>
<tr>
<td>
<label class="labelCol for="phone">Phone: *</label>
</td>
<td>
<input type="text" name="phone" id="phone" maxlength="80" size="30" />
</td>
</tr>
<td>
<label class="labelCol for="comments">Type of Job:</label>
</td>
<td >
<textarea name="comments" id="comments" maxlength="1000" cols="25" rows="3"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Free Estimate">
</td>
</tr>
</table>
</form>
</div>
</form>
<div id="footer">Copyright © 2011 Pasha the Painter<br />
<a href="mailto:gailliota1@nku.edu">gailliota1 [at] nku.edu</a></div>
</div>
</div>
</div>
</body>
</html>
Javascript:
function validateForm( ){
var email = document.forms[0].email.value;
var names = document.forms[0].name.value;
var phone = document.forms[0].phone.value;
var emailm = email.match(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$/)
var lnamem = names.match(/^([a-zA-Z]+)\S[a-zA-Z]([a-zA-Z]+))$/)
var fnamem = names.match(/^([a-zA-Z+)\S([a-zA-Z]\.\S)?[a-zA-Z]+))$/)
var phonem = phone.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/)
if (names == "" ){
alert("Please enter your name.");开发者_如何转开发
names.focus();
return false;
}
else if (fnamem == null || lnamem == null){
alert("Invalid name.");
names.focus();
return false;
}
if (email == ""){
alert("Please enter your e-mail address.");
email.focus();
return false;
}
else if (emailm == null){
alert("Invalid e-mail address.");
email.focus();
return false;
}
if (phone == ""){
alert("Please enter your phone number.");
phone.focus();
return false;
}
else if (phonem == null){
alert("Invalid number.")
phone.focus();
return false;
}
alert("Are you sure you would like to submit this form?");
names = names.value.toUpperCase();
return true;
}
Check your regular expressions. lnamem has an unmatched ) character and fnamem has two unmatched ) characters.
By removing these characters, I was able to get your code to work:
var lnamem = names.match(/^([a-zA-Z]+)\S[a-zA-Z]([a-zA-Z]+)$/)
var fnamem = names.match(/^([a-zA-Z+)\S([a-zA-Z]\.\S)?[a-zA-Z]+$/)
Check the console in Firebug for any error messages.
You can check your JS for errors using JSLint
JSlint shows these errors
Problem at line 13 character 40: Unescaped '-'.
var emailm = email.match(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$/)
Problem at line 13 character 54: Unescaped '-'.
var emailm = email.match(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$/)
Problem at line 13 character 75: Missing semicolon.
var emailm = email.match(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$/)
Problem at line 15 character 60: Unescaped ')'.
var lnamem = names.match(/^([a-zA-Z]+)\S[a-zA-Z]([a-zA-Z]+))$/)
Problem at line 15 character 64: Missing semicolon.
var lnamem = names.match(/^([a-zA-Z]+)\S[a-zA-Z]([a-zA-Z]+))$/)
Problem at line 17 character 41: Unescaped '['.
var fnamem = names.match(/^([a-zA-Z+)\S([a-zA-Z]\.\S)?[a-zA-Z]+))$/)
Problem at line 17 character 64: Unescaped ')'.
var fnamem = names.match(/^([a-zA-Z+)\S([a-zA-Z]\.\S)?[a-zA-Z]+))$/)
Problem at line 17 character 65: Unescaped ')'.
var fnamem = names.match(/^([a-zA-Z+)\S([a-zA-Z]\.\S)?[a-zA-Z]+))$/)
Problem at line 17 character 69: Missing semicolon.
var fnamem = names.match(/^([a-zA-Z+)\S([a-zA-Z]\.\S)?[a-zA-Z]+))$/)
Problem at line 19 character 83: Missing semicolon.
var phonem = phone.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{...
Problem at line 23 character 11: Use '===' to compare with ''.
if (names == "" ){
Problem at line 35 character 17: Use '===' to compare with 'null'.
else if (fnamem == null || lnamem == null){
Problem at line 35 character 35: Use '===' to compare with 'null'.
else if (fnamem == null || lnamem == null){
Problem at line 47 character 11: Use '===' to compare with ''.
if (email == ""){
Problem at line 59 character 17: Use '===' to compare with 'null'.
else if (emailm == null){
Problem at line 69 character 11: Use '===' to compare with ''.
if (phone == ""){
Problem at line 81 character 17: Use '===' to compare with 'null'.
else if (phonem == null){
Problem at line 83 character 29: Missing semicolon.
加载中,请稍侯......
精彩评论