だから私はウェブサイトを作成していて、その中にショッピングカートが必要です。ユーザーが詳細を入力する必要があるチェックアウトに到着すると、javascriptが機能しません。
すべてのフィールドに入力し、名前のみの文字、少なくとも 20 文字の住所など、各フィールドに特定の検証を行う必要があります。
問題は、関数を内部的に (同じページ内で) 実行しようとすると完全に機能しましたが、validateForm.js という別の外部ファイルからフェッチしようとすると、まったく機能しません。
これは割り当て目的であり、要件の 1 つは、すべての 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>
注意 sendEmail.php はまだ開発されていないため、今のところ空白のページですが、内部は機能しますが、別のファイルの関数は完全に無視されることに困惑しています。
この問題の原因と思われるヒントを教えていただければ幸いです