jQuery 表单验证和 Ajax 提交的问题

Posted 2023-05-09

【中文标题】jQuery 表单验证和 Ajax 提交的问题

【英文标题】：Problems with jQuery form validation and Ajax submit

【发布时间】：2012-07-09 22:01:14

【问题描述】：

我使用 jQuery 创建了一个包含两个部分的动态表单，一旦第一个部分正确完成，第二个部分将加载而无需刷新页面。

我的问题是，当第二部分完成时，我需要执行验证，显然要确保没有不正确的数据发送到服务器。发生的情况是，验证在首次单击提交按钮时起作用，但即使在不修复表单输入字段中的数据的情况下，如果我再次单击提交按钮时提交了不正确的数据？

我在网上搜索了答案并尝试了一些不同的方法：

我尝试将第二个提交方法更改为：

$('infoform').submit(function() 
// .. stuff 

);

但这没有用，也有人建议我尝试：

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

);

但这也不起作用，只是阻止了验证完全工作？

我想要的显然是让验证继续检查错误，直到输入的数据是正确的，一旦数据不再有错误，然后使用 ajax 调用发送数据？

表格的代码是：

 <form id="infoform" name="infoform" action="#" method="post">

        <div id="first_step">

                <!--<h1>WANT A FREE<br />SOCIAL MEDIA<br />AUDIT?</h1>-->
                <div class="formtext-img"></div>

                <div class="form">

                    <label for="username">Facebook or Twitter page address:</label>
                    <input type="text" name="url" id="url" value="http://" />                       

                </div><!-- clearfix --><div class="clear"></div><!-- /clearfix -->

                    <input class="submit" type="submit" name="submit_first" id="submit_first" value="" />
        </div><!--end of first step-->


        <div id="second_step">


                <div class="form">

                    <div id="nameInput">
                    <label for="yourname">Your Full Name. </label>
                    <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                    <input type="text" name="yourname" id="yourname" placeholder="Your name" /> 
                    </div>
                    <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                    <div id="emailInput">                   
                    <label for="email">Your email address.</label>
                    <input type="text" name="email" id="email" placeholder="Email address" />
                    </div>
                    <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                    <div id="phoneInput">
                    <label for="phone">Your contact number. </label>
                    <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                    <input type="text" name="phone" id="phone" placeholder="contact number" />  
                    </div>

                </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

                    <!--<input class="back" type="button" value="" />-->

                    <input class="send submit" type="submit" name="submit_second" id="submit_second" value="" />

        </div><!--end of second step-->

    </form>

这是我的 jQuery，我尝试将两个“submit_second”函数合并为一个，但这阻止了单击第二个提交按钮时发生的任何事情！

$('#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');
        



 );
 $('#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(dataString);
            
        );  
    return false;

);

【参考方案1】：

你有一个提交按钮和一个提交事件不是更合乎逻辑吗？ 然后提交函数将运行验证，并根据其结果提交或不提交表单。

【参考方案2】：

好的，经过大量修改代码并多次尝试相同的事情后，我终于让它完全按照我想要的方式工作了！

我已经将 Ajax 调用与验证检查一起放回了一种方法中，并找出了我出错的地方......语法错误！在 Ajax 调用提交数据之前，我忘记关闭验证检查的括号！我的错！我对此很陌生，所以我很高兴终于让它工作了！

    $('#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);
            console.log("running");
            error++;
         else 
            $(this).addClass('valid');
        
    );


    if(error==0)       
    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: "http://clients.socialnetworkingsolutions.com/infobox/contact/",  
            data: "url="+url+"&yourname="+yourname+"&email="+email+'&phone=' + phone,
            cache: false,
            success: function(data)   
                console.log("form submitted");
                alert(dataString);
            
        );  
    return false;

    

 );