Question

http://jsfiddle.net/1z9Lr5rv/1/

我正在为我的网站创建一个联系表单。我认为它工作正常，但它总是提交表单，不管是否有错误，return false应该保持表单不被提交。

我很抱歉，如果这是非常明显和愚蠢的，但我对这种事情很新。。。

Answer 1

您需要处理自动传递到提交处理程序并调用preventDefault()的事件对象。

示例：

var myForm = document.forms["contact-me"];

myForm.onsubmit = function(e)
{
    if(!warnsub())
    {
    e.preventDefault();
    }
}

正如@Pointy所评论的：IE9不会自动将事件对象传递给onsubmit委托。关于如何解决这个问题的讨论超出了这个问题的范围。

但只是一个旁注 - 尝试避免内联HTML中的函数调用（例如<form onsubmit=//your function() />调用）很有用。您的Google-Fu可以教你原因。

Answer 2

如果你从JS Fiddle中取出它，那么表单可以正常工作（无论如何你应该在这里发布代码）。这是（删除了冗余部分）：

<div class="body">If you have any questions about me, my teaching or curriculum, etc., please don't hesitate to contact me here. Please fill out all the fields in this form..
  <br>
  <br>
  <form name="contact-me" class="contact-me" onsubmit="return warnsub(this)"
     method="POST"
    action="https://secure.mailjol.net/allforms/u/3dcdda44.php" autocomplete="off">
    First Name: <input type="text" name="fname">
    Last Name: <input type="text" name="lname">
    Email Address: <input type="text" name="email">
    Message: <textarea name="message" id="message"></textarea>
    <input type="submit" value="Send">
  </form>
</div>


<script>

function warnsub(form) {
    var error = [];
    var fname = form.fname;
    var lname = form.lname;
    var email = form.email;
    var message = form.message;
    var atpos = email.value.indexOf("@");
    var dotpos = email.value.lastIndexOf(".");

    if (fname.value == "") {
        error.push(fname);
    }
    if (lname.value == "") {
        error.push(lname);
    }
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
        error.push(email);
    }
    if (message.value == "") {
        error.push(message);
    }

    if (error.length) {
        for (i = 0; i < error.length; i++) {

            // You want to clear this class if the user has another
            // attempt and gets it right
            error[i].className = 'error';
        }
        error[0].focus();
        return false;
    }
    return true;
}

为什么返回错误而不保持我的表单提交？

http://jsfiddle.net/1z9Lr5rv/1/

2 个答案: