即使通过 jQuery 提交表单也返回 false

Question

我遇到的问题是，如果和/或所有字段为空，即使代码返回 false，表单仍会提交。

我的 HTML：

<form action="" method="post" name="contactForm" id="contactForm">
    <input type="text" name="contactName" id="contactName" class="contactTextfield" />
    <input type="text" name="contactPhone" id="contactPhone" class="contactTextfield" />
    <input type="text" name="contactEmail" id="contactEmail" class="contactTextfield" />
    <textarea name="contactMessage" id="contactMessage" class="contactTextarea" rows="5"></textarea>
    <input type="submit" name="contactSubmit" id="contactSubmit" value="Send"/>
</form>

我的 jQuery：

$("#contactForm").submit( function() {
    var contactName = $("#contactName").val();
    var contactEmail = $("#contactEmail").val();
    var contactMessage = $("#contactMessage").val();
    var emailFormat = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    if ( contactEmail != '' && emailFormat.test(contactEmail) ) {
        var contactEmailCheck = true;   
    }

    if ( contactName != '' ) {
        var contactNameCheck = true;
    }

    if ( contactMessage != '' ) {
        var contactMessageCheck = true;
    }

    if ( contactEmailCheck == true && contactNameCheck == true && contactMessageCheck == true ) {
        return true;
    } else {
        return false;
    }
});

已修复：

原来它不起作用，因为 jquery 代码位于索引页面的标题中，而表单本身仅通过 ajax 从单独的 html 文件加载到页面上。我必须将 jquery 代码放在与表单相同的文件中。

Answer 1

这是一个范围问题。在 if 语句之外分配变量。

试试这个

$("#contactForm").submit(function() {
    var contactName = $("#contactName").val();
    var contactEmail = $("#contactEmail").val();
    var contactMessage = $("#contactMessage").val();
    var emailFormat = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var contactEmailCheck = false;
    var contactNameCheck = false;
    var contactMessageCheck = false;
    if (contactEmail != '' && emailFormat.test(contactEmail)) {
        contactEmailCheck = true;
    }

    if (contactName != '') {
        contactNameCheck = true;
    }

    if (contactMessage != '') {
        contactMessageCheck = true;
    }

    if (contactEmailCheck && contactNameCheck && contactMessageCheck) {
        return true;
    } else {
        return false;
    }
});​

Answer 2

我会推荐这个： 首先将发送按钮的输入类型从“提交”更改为“按钮”。

<input type="button" name="contactSubmit" id="contactSubmit" value="Send"/>

在 jquery 文档就绪函数或您认为正确的任何其他地方绑定一个点击事件到这个按钮。单击该发送按钮调用一个函数，您可以在其中进行所有验证并从那里提交您的表单，如果一切正常，则显示错误或警报。

#('#contactForm').click(function(){
    validateForm();
});

此外，在您的函数中编写的 ro 验证表单存在一些范围问题。

function validateForm() {
    var contactName = $("#contactName").val();
    var contactEmail = $("#contactEmail").val();
    var contactMessage = $("#contactMessage").val();
    var emailFormat = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var contactEmailCheck = false;
    var contactNameCheck = false;
    var contactMessageCheck = false;

    if ( contactEmail != '' && emailFormat.test(contactEmail) ) {
        contactEmailCheck = true;
    }

    if ( contactName != '' ) {
        contactNameCheck = true;
    }

    if ( contactMessage != '' ) {
        contactMessageCheck = true;
    }

    if ( contactEmailCheck == true && contactNameCheck == true && contactMessageCheck ==     true ) {
        //submit form from here since everything is fine
        $('#contactForm').submit(); //contactForm is your form id
    } else {
        //show errors here & don't submit form
    }
}

试一试。肯定会奏效。