javascript - onsubmit 返回 validateForm 未触发

Question

这真的让我陷入困境。 当我的 validateForm 函数位于全局变量中时，我通过调用 onsubmit="return validateForm()" 成功地使用我的 javascript 验证了此表单。不幸的是，一旦我开始尝试调试 IE8，我就不断收到关于全局变量的错误，我决定改为将其设为全局函数...

现在我似乎根本无法触发它。 -_-

(是的——我实际上在测试中为它添加了前缀，以确保它不会因为全局性而发生冲突。)

据我所知，我正在做一个基本形式的缩影。这种方法是 w3schools 上展示的方法，对他们有效，所以...有什么用？

我的表格:

<form name="emailus" id="emailus" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" onsubmit="return validateForm()">
    <a href="mailto:example@email.com">
        <h3><i class="icon-envelope-alt icon-large"></i>Send us an email<span>: example@email.com</span></h3>
    </a>

    <div class="half">
        <fieldset class="name">
            <label for="cf_name">Name <span>*</span></label>
            <input type="text" id="cf_name" name="cf_name" class="textualformfield" placeholder="Jane Doe" pattern="^[a-zA-Z'\s]+$">
        </fieldset>
        <fieldset class="emailaddress">
            <label for="cf_email">E-mail <span>*</span></label>
            <input type="text" id="cf_email" name="cf_email" class="textualformfield" placeholder="janedoe@email.com" pattern="[a-z0-9!#$%\x26'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%\x26'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b">
        </fieldset>
        <fieldset class="phonenumber">
            <label for="cf_phonenumber">Phone</label>
            <input type="tel" id="cf_phonenumber" name="cf_phonenumber" class="textualformfield" placeholder="555-555-5555">
        </fieldset>
        <fieldset class="eventdate">
            <label for="cf_eventdate">Event Date</label>
            <input type="text" id="cf_eventdate" name="cf_eventdate" class="textualformfield" placeholder="May 25th, 2012">
        </fieldset>
        <fieldset class="location">
            <label for="cf_location">Location</label>
            <input type="text" id="cf_location" name="cf_location" class="textualformfield" placeholder="The Church">
        </fieldset>
    </div>

    <div class="half">
        <textarea name="cf_message" class="textualformfield" placeholder="Your Message"></textarea>
    </div>

    <input type="submit" name="submit" id="submit" value="Submit">
</form>

我的 javascript 函数位于 (document).ready 之外，因此它应该可以被调用:

function validateForm() {
    window.alert("I'm activating!");
    var valid = true;

    jQuery('p.validationhelpers').remove();

    if (document.emailus.cf_email.value === '') {
        jQuery('.emailaddress').append("<p class='validationhelpers'>Please enter an email address.</p>");
        jQuery('.emailaddress>input').focus();
        valid = false;
    }

    if (document.emailus.cf_name.value === '') {
        jQuery('.name').append("<p class='validationhelpers'>Please enter your name.</p>");
        jQuery('.name>input').focus();
        valid = false;
    }

    return valid;
}

相反，它只是提交... 我觉得这是一个愚蠢的问题。我尝试用 return validateForm(); 替换 onsubmit 的内容，return false; return validateForm()(确实返回了 false 并阻止了提交)，return validateForm();返回 false();，以及 validateForm() 和 validateForm();。

>_<

解决方案: bjornarvh 通过调试实际站点找到了真正的原因。我在这里突出显示它是因为真正的答案在标记为已解决的答案的评论中。

原来我在 javascript 中缺少一个函数的右括号，这导致 validateForm 函数被包装在 (document).ready 中，这使其无法访问 onsubmit。意外范围问题!

Answer 1

JavaScript区分大小写，所以需要加上

onsubmit="return ValidateForm()"

代替

onsubmit="return validateForm()"