在提交时检查 jQuery 验证之前的表单提交答案

【问题标题】：Form submitting before jQuery validation is checked on submit在提交时检查 jQuery 验证之前的表单提交
【发布时间】：2012-07-08 22:33:43
【问题描述】：

我正在使用 Ajax 和 jQuery 来验证和提交表单中的信息。我遇到的问题是，当我单击提交按钮时，表单会在执行验证检查并显示错误之前立即将信息提交到服务器？

我不确定这里有什么问题，所以任何输入都会很棒！

干杯

$('#submit_second').click(function() {
    //remove classes
    $('#second_step input').removeClass('error').removeClass('valid');

    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    var phonePattern = /^\+?[0-9]{0,15}$/ ;  
    var fields = $('#second_step input[type=text]');
    var error = 0;
    fields.each(function() {
        var value = $(this).val();
        if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value))) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);

            error++;
        } else {
            $(this).addClass('valid');
        }
        if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='phone' && !phonePattern.test(value) )  ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);

            error++;
        } else {
            $(this).addClass('valid');
        }

    });

    if(!error) {
        //update progress bar
        $('#progress_text').html('66% Complete');
        $('#progress').css('width','226px');

        //slide steps
        $('#second_step').slideUp();
        $('#fourth_step').slideDown();     
    } else return false;
});

$('#submit_second').click(function(){

    url =$("input#url").val();
    yourname =$("input#yourname").val();
    email =$("input#email").val();
    phone =$("input#phone").val();

    //send information to server
    var dataString = 'url='+ url + '&yourname=' + yourname + '&email=' + email + '&phone=' + phone;  

    alert (dataString);

    $.ajax({  
        type: "POST",  
        url: "#",  
        data: "url="+url+"&yourname="+yourname+"&email="+email+'&phone=' + phone,
        cache: false,
        success: function(data) {  
            console.log("form submitted");
            alert("success");
        }
    });  
    return false;
});

【问题讨论】：

标签： jquery ajax forms validation submit

【解决方案1】：

$('form_to_validate').submit(function() {
    // .. stuff
});

【讨论】：

我试过了，但是在提交每个部分后，表单有多个部分使用 jquery 动态加载，因此它不能正常工作，因为有 2 个部分每个都有一个提交按钮，第一部分工作正常，但作为我试图在第二阶段同时验证数据并将数据提交到服务器，它似乎在以我的代码结构方式执行验证检查之前提交数据？
在您的问题中向我们展示 HTML。

【解决方案2】：

我猜你正在寻找的是这样的：

$('#submit_second').submit(function(evt){
    evt.preventDefault();
    ...
});

查看 jQuery 文档：http://api.jquery.com/event.preventDefault/

【讨论】：

觉得这行不通吗？我不想阻止表单提交，只是在首先检查验证之后发生！如果我要将所有代码移动到一个函数中，您认为这将有助于解决问题吗？
是的。您可以调用 preventDefault 以防验证失败，否则表单将正确提交。
我终于解决了问题，加油！ stackoverflow.com/questions/11413111/…