Question

我写了一个非常简单的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而不是一个页面来处理该消息。这可能是问题吗？

Answer 1

html5“required”属性告诉浏览器在继续之前验证read more here。这意味着它甚至在调用javascript函数之前停止事件（在支持的浏览器上），除非它通过了基本验证（必填字段和电子邮件）。

如果您希望javascript执行并执行自己的验证，则需要删除“required”属性。您也可以尝试更复杂的html表单验证。 Here is a good article on the subject.

Javascript表单验证不起作用 - 脚本没有被调用？

1 个答案: