Question

我使用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;
});

Answer 1

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

Answer 2

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

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

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

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

2 个答案: