外部 JavaScript 文件无法识别 HTML 表单



我刚刚开始学习JavaScript的基础知识,目前,它向我显示未定义"文档">的重复错误消息。我确定我错过了某个地方的遗忘,但唉,我来这里寻求你的帮助。

我的目标是向表单中尚未填写的每个字段显示错误消息。非常感谢您的帮助!

这是我的HTML,CSS和JavaScript表单。

function checkform() {
var fullname = doucment.form_Script['contact']['fullname'].value;
var email = doucment.form_Script['contact']['email'].value;
var message = doucment.form_Script['contact']['message'].value;
var subject = document.form_Script['contact']['subject']
var isValid = true;      

//Displays errors if not filled in    
if (fullname == "") {
document.getElementById("error_fullname").innerHTML = "Name Required";
isValid = false;
}else {
document.getElementById("error_fullname").style.display = "none";    
}

if (email == "") {
document.getElementById("error_email").innerHTML = "Email Required";
isValid = false;
}else {
document.getElementById("error_email").style.display = "none";    
}

if (subject == "") {
document.getElementById("error_subject").innerHTML = "Please choose a Subject"
isValid = false;
}else{
document.getElementByID("error_subject").style.display = "none";    
}   

if (message == "") {
document.getElementById("error_message").innerHTML = "Please fill in your enquiry";
isValid = false;
}else {
document.getElementById("error_message").style.display = "none";    
}

return isValid;
}     
#contact {
display: flex;
display: inline;
margin-top: 40px;
margin-right:auto;
margin-left: auto;
width: 700px;
background-color: #e8e8e8;
padding: 20px;
}
#cHeader {
font-size: 24px;
font-weight: 800px;
}
input[type=text], select, textarea {
box-sizing: border-box;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
margin-bottom: 10px;
}
input[type=submit] {
background-color: #ffff;
width: 100%;
padding: 7px;
transition: 0.4s;
font-weight: 600;
margin: auto;

}
label[for="fullname"], label[for="email"], label[for="subject"] , label[for="message"] {
float: left;
margin: 0 auto;
margin: 4px;
}
input[type=submit]:hover {
box-shadow: 2px 4px 12px 4px rgba(0,0,0,.2);
}
<!DOCTYPE html>
<html lang=en>
<head>
<title> UserName | Contact</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="forms.css">
<script src="js/form_Script.js"></script>
</head>
<body class="main">
<header>
<h1>UserName| Contact</h1>
</header>
<nav class='nav-flex'>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="form.html">Contact</a></li>
</ul>
</nav>
<form name="name" id="contact" onsubmit="return checkForm()" action="welcome.html">
<h2 id="cHeader">Contact</h2>
<p>Weather you have a question about my skills, availability or wanting to know more about me, please do contact me and I’ll be happy to help you out to fulfil your answer!</p>
<!-- Displays an Error if this field hasn't been filled -->

<label id="fullname" for="fullname">Name</label>
<input type="text" id="fullname" name="fullname" required placeholder="Your Fullname..">
<span id="error_fullname"></span>
<!-- Displays an Error if email address isn't validated -->
<label id="email" for="email">Email</label>
<input type="text" id="email" name="email" required placeholder="Your Email Address..">
<span id="error_email"></span>
<label id="subject" for="subject">Subject</label>
<select id="subject" name="subject" required>
<option value="Appointment">Appointment</option>
<option value="Further information">Further Information</option>
<option value="About Myself">About Myself</option>
</select>
<span id="error_subject"></span>
<!-- Displays an Error if this field hasn't been filled -->
<label id="message" for="message">Message</label>
<textarea id="message" name="message" required placeholder="Enquiring.." style="height:200px"></textarea>
<span id="error_message"></span>
<!-- Displays either a Error or Submission that will quote if its incorrect or successfully submitted -->
<input type="submit" value="Submit">
</form>
</body>
<footer class="footer">
<!--This shows who the author is, has a W3C link that says that it is Validated and has the same links from the navbar for accessability accessability -->
<ul class="leftfooter">
<li><small>Copyright &copy; Root 2019</small></li>
<li><small>Validated for accessablity by <a href="https://www.w3.org/standards/webdesign/accessibility" target="_blank">W3C</a></small></li>
</ul>
<div class="rightfooter">
<p>Sitemap</p>
<a href="home.html">Home</a>
<a href="resume.html">Resume</a>
<a href="portfolio.html">Portfolio</a>
<a href="form.html">Contact</a>
</div>
</footer>
</html>
<!-- 
Author: UserName
HTML Ver: 1.08
CSS Ver: 1.05
Ver Date: 18/10/2019
-->

只需检查您的拼写 - 您提供的代码中有对doucment的引用(不是按预期document(

最新更新