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似乎没有被调用（没有任何警报被解雇）。并且有兴趣知道这是否是正确的方法。请注意，如果有人禁用了javascript，我觉得我无法通过jquery ajax调用触发POST请求。

非常感谢

乔

Answer 1

更改为：

onsubmit="return validateContactForm();"

此外，如果验证脚本中发生错误，则会触发onsubmit。添加try / catch以查看是否有任何错误。

Answer 2

请尝试

onsubmit="return validateContactForm();"

或提交按钮

onclick="return validateContactForm();"

Answer 3

嗨而不是提交按钮使用简单的HTML按钮

<input type="button" value="Submit" onClick="validateContactForm();"/>

并在javaScript中使用

document.forms["myform"].submit();

Answer 4

谢谢大家的回答。我很感激。

我在validateContactForm（）方法中遇到语法错误：

alert(email + = ' is an invalid email address');

+和=

之间有一个空格但是，我真的不明白之前的警报是不行的。：（

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

4 个答案: