javascript - 当 onsubmit 应该返回 false 时表单正在向服务器发送数据

Question

我正在尝试验证表单。无论是否启用 Javascript，我都希望它能正常工作。如果启用了 javascript，我希望首先在客户端进行验证。我让我的 onsubmit 调用我的函数 validateContactForm() 但即使应该返回 false，也不会发送任何表单详细信息。

我尝试了多种调用 validatContactForm 方法的方法，包括:

onsubmit="validateContactForm();"

onsubmit="validateContactForm()"

和

onsubmit="return validateContactForm()"

而且我不太确定我应该使用哪个以及为什么。我应该包括分号吗？有关系吗？ onsubmit 返回的错误是否会阻止提交表单？

我读到过如果 javascript 调用 submit() 方法会绕过 onsubmit 事件，但我只是使用普通的旧提交按钮方法。

这是我的 html:

<form method="POST" action="email_processing.php" onsubmit="validateContactForm();">
    <fieldset>
        <label>Company Name: </label>
        <input type="text" name="company_name" id="company_name" />
        <br />
        <label>Contact Name: * </label>
        <input type="text" name="contact_name" id="contact_name" />
        <br />
        <label>Phone Number: </label>
        <input type="text" name="phone_number" id="phone_number" />
        <br />
        <label>Email: * </label>
        <input type="text" name="email" id="email" />
        <br />
        <label>Enquiry: </label>
        <textarea name="enquiry" id="enquiry"></textarea>
        <br/>
        <input type="submit" value="Submit" />
    </fieldset>
</form>

和javascript:

function validateEmail(elementValue){
    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if(!emailPattern.test(elementValue) || !validateString(elementValue)) {
        alert("In false valEmail");
        return false;
    }
    return true;
}

function validateContactName(elemValue) {
    if($.trim(elemValue) == "" || !validateString($.trim(elemValue))) {
        alert("In false valContactName");
        return false;
    }
    return true;
}

function validateString(elemValue) {
    // Protect against malicious javascript
    if(elemValue.match(/[<>!]+/) != null) {
        return false;
    }
    return true;
}

function validateContactForm() {
    alert("Here");
    var email = $.trim($('#email').val());
    if(!validateEmail(email)) {
        alert(email + = ' is an invalid email address');
        $('#email').focus();
        $('#email').select();
        alert("In valConForm email false");
        return false;
    }
    if(!validateString($('#contact_name').val())) {
        alert('Please enter a contact name.');
        $('#contact_name').focus();
        $('#contact_name').select();
        alert("In valContForm contname false");
        return false;
    }
}

非常感谢知道为什么似乎没有调用 onsubmit(没有一个警报被触发)。并且也有兴趣知道这是否是解决此问题的正确方法。请注意，我觉得我无法通过 jquery ajax 调用触发 POST 请求，以防万一有人禁用了 javascript。

非常感谢

乔

Answer 1

更改为:

onsubmit="return validateContactForm();"

此外，如果验证脚本中出现错误，onsubmit 将触发。添加try/catch，看看有没有报错。