jQuery表单验证和Ajax提交问题 [英] Problems with jQuery form validation and Ajax submit

问题描述

我已经使用jQuery创建了一个动态表单，该表单有两个部分，一旦第一个部分正确完成，第二个部分就会加载而无需刷新页面.

I have created a dynamic form using jQuery that has two sections, once the first section has been completed correctly the second section loads without page refresh.

我的问题是，第二部分完成后，我需要执行验证，显然要确保没有错误的数据发送到服务器.发生的情况是，验证可以在首次单击提交按钮时进行，但是如果我第二次单击不正确的数据，即使没有在表单输入字段中固定数据，也可以进行验证?

My problem is that when the second section is complete I need the validation to be performed and obviously ensure no incorrect data is sent to the server. What is happening is that the validation works on the initial click of the submit button but even without fixing the data in the form input fields if I click the submit button a second time the incorrect data is submitted?

我在网上搜索了答案，并尝试了一些不同的事情:

I have searched online for an answer and have tried a few different things:

我尝试将第二个Submit方法更改为:

I tried changing the second submit method to:

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

});

但是这没有用，还建议我尝试:

but this didnt work and it was also suggested that I try:

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

});

但这也没有用，只是阻止了验证的完全进行?

but this also didnt work, only prevented the validation from working completely?

我想要的显然是让验证不断检查错误，直到输入的数据正确无误，并且一旦不再存在要使用ajax调用发送的数据的错误了?

What I want is obviously to have the validation keep checking for errors until the data entered is correct and once there are no longer errors for the data to be then sent using the ajax call?

该表格的代码为:

 <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"功能合并为一个，但这可以阻止单击第二个提交"按钮时发生的一切！

And here is my jQuery, i have tried merging the two "submit_second" functions into one but this stopped anything happening when the second submit button was clicked!

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

});

推荐答案

好，因此，在对代码进行了很多修改并尝试了多次之后，我终于完全按照我想要的方式工作了！

Ok, so after alot of tinkering with the code and trying the same things numerous times I have finally got it working exactly how I wanted!

我将Ajax调用连同验证检查一起放回到一个方法中，并弄清楚我要去哪里错了……语法错误！我忘了在Ajax调用提交数据之前关闭括号以进行验证检查！我的错！我对此很陌生，所以我很高兴终于能够成功！

I have put the Ajax call back into the one method along with the validation checks and figured out where i was going wrong... syntax errors! I had forgotten to close the brackets for the validation checks off before the Ajax call submit the data! My bad! I am quite new to this though so im just glad to finally have it working!

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

    }

 });

这篇关于jQuery表单验证和Ajax提交问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！