javascript - 尽管验证失败，仍通过 AJAX 提交表单

Question

我是 Ajax 新手，我想将其与当前正在使用的联系表单一起使用。该表单设置为运行 JS (fieldchk()) 来验证所需字段，然后向相应方发送电子邮件。

我已正确设置 Ajax，发送电子邮件并在同一页面上显示一条消息:

$('form').on('submit', function(event) {
    event.preventDefault();
    return fieldchk();
    var url = $(this).attr('action');
    var formData = $(this).serialize();
        $.post(url, formData, function(response){
            $('#feedback_form').html("<p>Thanks for contacting us!</p>");
        });
});

编辑:现在表单已得到验证，如果有效，则不会发送电子邮件。验证现在可以正常工作。

这是我的表单代码:

<form 
    name="feedback" 
    action="feedbackact.cfm?type=feedback" 
    method="post"  
    enctype="multipart/form-data"
>

这是我用来验证表单的代码:

function fieldchk() {
    errmsg = '';
    if (document.feedback.name.value == ''){
        errmsg = errmsg + 'You must enter your name.\n';
    }

    ... all the fields get checked like this ...

    if (errmsg > ''){
        alert(errmsg);
        return false;
    }
}

Answer 1

您需要在 JavaScript 函数中添加某种类型的验证。我会修改标记

<form 
    name="feedback" 
    action="feedbackact.cfm?type=feedback" 
    method="post"
    enctype="multipart/form-data"
>

您不需要 onsubmit，因为事件监听器已经在监听表单名称。我假设 Feedbackact.cfm 页面决定表单是否有效？如果是这种情况，您可能需要将表单值传递给 Coldfusion。

但是我会采取不同的做法:

HTML:

<form name='feedback'><!--inputs--></form>

JavaScript:
$('form[name="feedback"]').on('submit', function() {

    var formData = this.serializeArray();

    if ( fieldcheck( formData) ) { //verifying the form data is correct

        $.post(); //post data

        Coldfusion.navigate("feedbackact.cfm?type=feedback");

    }

    else { alert('not filled out correctly!') }

});