Javascript 表单验证不起作用 - 未调用脚本

Javascript form validation not working - Script not being called?

本文关键字：调用 脚本 不起作用 表单 验证 Javascript      更新时间：2023-09-26

我写了一个非常简单的javascript表单验证脚本：

      function validateForm(){
        var x=document.forms["contactForm"]["firstname"].value;
        if (x==null || x==""){
            return false;
        }
        var y=document.forms["contactForm"]["lastname"].value;
        if (y==null || y==""){
            return false;
        }
        var z=document.forms["contactForm"]["emailaddress"].value;
        var atpos=z.indexOf("@");
        var dotpos=z.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=z.length){
            return false;
        }
        var msg_area = document.getElementById("message");
        msg_area.innerHTML = "";
        if (document.getElementById("message").value.length < 20) {
            return false;
        }
        else document.getElementById("contactForm").submit();
    }

它应该验证此表单：

 <form name="contactForm" onsubmit="return validateForm()" action="./thankyou.html" method="post">
        <label for="firstName">First Name <sup>*</sup></label>
        <input name ="firstname" id="firstName" type="text" placeholder="First Name" required />
        <label for="lastName">Last Name <sup>*</sup></label>
        <input name ="lastname" id="lastName" type="text" name="lastName" placeholder="Last Name" required />
        <label for="emailaddress">Email address <sup>*</sup></label>
        <input name="emailaddress" id="emailAddress" type="email" placeholder="something@example.com" required />
        <label for="message">Message<sup>*</sup></label>
        <textarea id="message" placeholder="Remember, be nice!" required></textarea>
        <input type="submit" name="submit" value="Email Me!" class="emailsub" />
        <p class="small"><sup>*</sup> denotes a required field.</p>
    </form>

当它被提交时，它似乎根本没有真正调用javascript。它唯一寻找的是它满足 html 的"必需"部分。我对javascript很陌生，所以问题所在可能很明显，但我自己找不到它。

任何帮助都非常感谢！

p.s. 这是针对本地网站的，因此 action=" 转到另一个 html 而不是页面来处理消息。这可能是这里的问题吗？

html5 "required" 属性告诉浏览器在继续之前进行验证，请在此处阅读更多内容。这意味着它会在调用 javascript 函数之前停止事件（在支持的浏览器上），除非它通过基本验证（必填字段和电子邮件）。

如果您希望javascript执行并执行自己的验证，则需要删除"required"属性。您也可以尝试更复杂的 html 表单验证。这是一篇关于这个主题的好文章。

相关文章：