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

Posted 2023-05-09

【中文标题】在提交时检查 jQuery 验证之前的表单提交

【英文标题】：Form submitting before jQuery validation is checked on submit

【发布时间】：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;
);

【参考方案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 以防验证失败，否则表单将正确提交。

我终于解决了问题，加油！ ***.com/questions/11413111/…