个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-27 23:13:31 25 4
gpt4 key购买 nike

我刚刚开始学习 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
-->

最佳答案

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

关于javascript - 外部 JavaScript 文件无法识别 HTML 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58384730/

25 4 0
文章推荐： javascript - 动态设置href标签
文章推荐： javascript - 来自 jQuery 的输入值未在表单提交时被提取
文章推荐： css - div 之间的边距底部未按预期工作
文章推荐： html - 从 html 中检索数据以与 SCSS/CSS 一起使用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com