Problems with jQuery form validation and Ajax subm

Question

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:

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?

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?

The code for the form is:

 <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>

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;

});

Answer 1

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!

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;

    }

 });

Answer 2

Would not it be more logical that you had one submit button and one submit event. The submit function will then run validation and depending on it's result will submit or not submit a form.