ユニプロジェクトのフォームで基本的なデータ検証を機能させようとしています。しかし、私が呼び出そうとしているjavascript関数はまったくアクセスされていないようで、その理由を理解できていません。
これが私のHTMLです:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<TITLE>Make an Order</TITLE>
<link href="design/css/style.css" rel="stylesheet" type="text/css">
<script src="design/scripts/Validator.js" language="javascript" type="text/javascript"></script>
</HEAD>
<BODY>
<div id="container">
<form id="guestbook" method="post" action="index.html" onsubmit="return Validator(this);">
<fieldset>
<legend>
Personal information
</legend>
<label for=name>Name:</label>
<input id=name name=name type=text placeholder="Your name" required autofocus><br />
<label for=email>Email: </label>
<input id=email name=email type=text placeholder="Your email address" required><br />
<label for=phnumber>Phone number: </label>
<input id=phnumber name=phnumber type=text placeholder="Your telephone number" required><br />
</fieldset>
<fieldset>
<legend>
Order details
</legend>
Choose whether you would like to order an image, video, or both:<br />
<input id=image name=order_type type=checkbox value="Image"><label for=image>$100 Image:</label><br />
<input id=video name=order_type type=checkbox value="Video"><label for=video>$95/frame Video:</label><br />
<label for=url>URL of image to modify: </label>
<input id=url name=url type=text placeholder="URL of image" required><br />
</fieldset>
<fieldset>
<legend>
Credit card details
</legend>
<label for=ccnumber>Credit card number:</label>
<input id=ccnumber name=ccnumber type=text placeholder="Your credit card number" required><br />
<label for=bsbnumber>BSB number:</label>
<input id=bsbnumber name=bsbnumber type=text placeholder="Your BSB number" required><br />
</fieldset>
<div class="buttons">
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</div>
</form>
<div id="footer">
<p>website by etc</p>
</div>
</div>
</BODY>
</HTML>
そして、これが私の外部javascriptファイルValidator.jsです:
function Validator(theForm)
{
var errorinit = "Error(s) detected. Please amend before continuing:\n";
var error = errorinit;
//check that at least one checkbox (to choose either image or video) has been selected
var boxChecked = false;
if (theForm.image.checked == true && theForm.video.checked == true)
{
boxChecked = true;
}
if (boxChecked == false)
{
error += " - You must select at least a video or an image.\n"
break;
}
//check that numerical-only inputs have numbers (but allowing for habitual spaces or dashes) only
var digits = "0123456789- ";
var temp = null;
for (var i = 0; i < theForm.phnumber.value.length; i++)
{
temp = theForm.phnumber.value.substring(i, i+1)
if (digits.indexOf(temp) == -1 && theForm.phnumber.value != "")
{
error += " - Your phone number must be numerical only.\n";
break;
}
}
for (var i = 0; i < theForm.ccnumber.value.length; i++)
{
temp = theForm.ccnumber.value.substring(i, i+1)
if (digits.indexOf(temp) == -1 && theForm.ccnumber.value != "")
{
error += " - Your credit card number must be numerical only.\n";
break;
}
}
for (var i = 0; i < theForm.bsbnumber.value.length; i++)
{
temp = theForm.bsbnumber.value.substring(i, i+1)
if (digits.indexOf(temp) == -1 && theForm.bsbnumber.value != "")
{
error += " - Your bsb number must be numerical only.\n";
break;
}
}
//check that the email address contains an @ symbol
if ((theForm.email.value.indexOf ('@',0) == -1 || theForm.email.value.indexOf ('.',0) == -1) && theForm.email.value != "")
{
error += " - Your email address is invalid.";
}
//check if there has been any error
if (error != errorinit)
{
alert(error);
return (false);
} else {
alert("no problems");
return (true);
}
}
これはかなり単純なコードなので、チェックして再チェックした後、なぜそれが機能しないのかについて困惑しています。javascriptでわかるように、エラーが発生したかどうかに関係なくアラートをスローするように設定しましたが、アラートはまったく表示されません。検証なしでindex.htmlに戻るだけです(「必須」フィールドは別として)。
これが機能しない理由を誰かが指摘できますか?