所以我正在创建一个网站,其中我需要一个购物车。现在当我到达用户必须输入详细信息的结账时,javascript将无效。
我需要对每个字段进行某些验证,例如每个字段都被填充,字母只在名称中,地址至少有20个字符等。
问题在于,当我尝试在内部(在同一页面内)执行该功能时,它完美地工作,当我尝试从另一个名为validateForm.js的外部文件中获取它时,它根本不起作用。
这是出于分配目的,其中一个要求是将所有JS放在一个单独的文件中。
这是checkout.php(要添加详细信息)的一部分
Checkout.php的一部分
<div class="overview">
<h1> Please make sure that the order is correct before entering the details and proceeding for Checkout.</h1>
</div>
</div>
<div class="form">
<form name="sendEmail" action="sendEmail.php" onsubmit="return checkEmpty()" method ="post">
<table class="tablealign" id="tablecheckout">
<th>Fill in All Details</th><th></th>
<tr><td>Name:*</td> <td><input type="text" name="name"></td></tr>
<tr><td>Surname:*</td> <td><input type ="text" name="surname"></td></tr>
<tr><td>Address:*</td> <td><input type ="text" name="address"></td></tr>
<tr><td>Town:*</td> <td><input type ="text" name="town"></td></tr>
<tr><td>Telephone:*</td> <td><input type ="text" name="Telephone"></td></tr>
</table>
<input id="submit" type="submit" value="Confirm Checkout">
</form>
</div>
现在函数可以在validateForm.js中找到,其中的函数是:
validateForm.js
//To check that ALL characters are letters
function allLetters(input)
{
var letters = /^[A-Za-z]+$/;
if(input.value.match(letters))
{
return true;
}
else
{
alert('Only LETTERS are allowed in the Name');
document.sendForm.email.focus();
return false;
}
}
//To check that ALL characters are numbers
function allNumbers(input)
{
var numbers = /^[0-9]+S/;
if (input.value.match(numbers))
{
return true;
}
else
{
alert ('Only Numbers are allowed in the Mobile Field');
document.sendForm.mobile.focus();
return false;
}
}
// Check Validity of Email
function checkEmail()
{
var x = document.forms["sendForm"]["email"].value;
var atPosX= x.indexOf("@");
var dotPosX = x.indexOf(".");
if (atposX<1 || dotPosX < atPostX+2 || dotPosX+2 >= x.length)
{
alert("Please Provide a Valid E-Mail Address");
document.sendForm.email.focus();
return false;
}
else
{
return true;
}
}
// Check whether every field is filled
function checkEmpty()
{
var name = document.forms["sendForm"]["name"].value;
var surname = document.forms["sendForm"]["surname"].value;
var address = document.forms["sendForm"]["address"].value;
var town = document.forms["sendForm"]["town"].value;
var telephone = document.forms["sendForm"]["telephone"].value;
if (name == null || name == "" || surname== "" || surname == null || address == null || address == "" || telephone == null || telephone == "" || town == null || town == "")
{
alert ("ALL Fields are to be filled in");
return false;
}
else
{
return true;
}
}
//Check that the Address is longer than 20 characters
function checkAddress()
{
if (document.forms.sendForm.address.value.length < 20)
{
alert ('Address must be AT LEAST 20 characters long');
return false;
}
else
{
return true;
}
}
checkout.php HEAD标记中的是:
<head>
<title> USA Women's Soccer Team Unofficial Website| Checkout PAGE </title>
<meta name="keywords" content="HTML,CSS,XML, JavaScript">
<meta name="description" content="USWNT Unofficial Website News and Players Homepage News ">
<link rel="stylesheet" type="text/css" href="GeneralBackground.css">
<script type ="text/javascript" src="validationForm.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
</head>
N.B。 sendEmail.php现在只是一个空白页面,因为它尚未开发,但令我感到困惑的是内部工作但另一个文件中的函数完全被忽略。
如果你能给我一些提示可能是这个问题的原因,我将非常感谢