Question

Im having a issue, I need to combine 2 scripts together. One of which is a validation and the other is variables/ajax script. I tried but i cannot get it to work. I put it within the script under the area that checks if it has the needfilled element attached however it submits without executing the ajax call.

Script 1:

$(document).ready(function(){
 $("#loading").hide();

// Place ID's of all required fields here.
required = ["parentFirstName", "parentLastName", "parentEmailOne", "parentZip"];
// If using an ID other than #email or #error then replace it here
email = $("#parentEmailOne");

errornotice = $("#error");
// The text to show up within a field when it is incorrect
emptyerror = "Please fill out this field.";
emailerror = "Please enter a valid e-mail.";




$("#theform").submit(function(){    
    //Validate required fields


    for (i=0;i<required.length;i++) {
        var input = $('#'+required[i]);
        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("needsfilled");
            input.val(emptyerror);
            errornotice.fadeIn(750);
        } else {
            input.removeClass("needsfilled");


        }
    }
    // Validate the e-mail.
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
        email.addClass("needsfilled");
        email.val(emailerror);
    }

    //if any inputs on the page have the class 'needsfilled' the form will not submit
    if ($(":input").hasClass("needsfilled")) {
        return false;
    } else {
        errornotice.hide(); 
        return true;
    }
});


// Clears any fields in the form when the user clicks on them
$(":input").focus(function(){       
   if ($(this).hasClass("needsfilled") ) {
        $(this).val("");
        $(this).removeClass("needsfilled");
   }


});
}); 

Script 2:

// Form Varables
var parentFirstNameVal = $("#parentFirstName").val();
var parentLastNameVal = $("#parentLastName").val();
var emailaddressVal = $("#parentEmailOne").val();
var parentPhoneVal = $("#parentPhone").val();
var parentAddressVal = $("#parentAddress").val();
var parentAddressContVal = $("#parentAddressCont").val();
var parentCityVal = $("#parentCity").val();
var parentStateVal = $("#parentState").val();
var parentZipVal = $("#parentZip").val();   
var parentListenVal = $("#parentListen").val();     
var codeVal = $("#code").val();     
var getUpdateVal = $("#getUpdate").val();       

            input.removeClass("needsfilled");
            $("#message-space").html('<br /><br /><span class="greenText">Connected to Facebook.</span><br />');
            $("#loading").show();


            var counter = 0,
                divs = $('#div1, #div2, #div3, #div4');

            function showDiv () {
                divs.hide() 
                    .filter(function (index) { return index == counter % 3; }) 
                    .show('fast'); 

                counter++;
            }; 

            showDiv();

            setInterval(function () {
                showDiv();
            }, 10 * 600); 

            alert(parentFirstNameVal);

            $.ajax({
                type: "POST",
                url: "includes/programs/updateEmailsTwo.php",
                data: "parentFirstName="+parentFirstNameVal+"&parentLastName="+parentLastNameVal+"&UserEmail="+emailaddressVal+"&parentPhone="+parentPhoneVal+"&parentAddress="+parentAddressVal+"&parentAddressCont="+parentAddressContVal+"&parentCity="+parentCityVal+"&parentState="+parentStateVal+"&parentZip="+parentZipVal+"&parentListen="+parentListenVal+"&code="+codeVal+"&getUpdate="+getUpdateVal+"&ref=<?php echo $_SESSION["refid"]; ?>",
                success: function(data){
                $("#message-space").html('<br /><br /><span class="greenText">Complete</span><br />');
                divs.hide() 

        }
     });

Answer 1

In addition to the suggestions that @JeffWilbert gave, I am going to follow it up with some more suggestions to make your code a bit more cleaner and efficient.

First, just like you did in script 1, where you have an array of field names, you can do the same for script 2. Below is an example of what you can do make your code a bit more readable.

var fields = ['parentFirstName', 'parentLastName', 'parentEmailOne', 'parentPhone'];
var fieldsValue = [], dataString;

for(i = 0; i < fields.length; i++){
     fieldsValue.push(fields[i] + "Val=" + $('#' + fields[i]).val());
}

dataString = fieldsValue.join("&");

Second, If Script 2 is not dependent on any variable declared from Script 1, I would convert Script 2 into its own function and call it from Script 1. I think adding all that code inside the else like Jeff suggested is not best.

function Script2(){
     //Script 2 Code
}

$("#theform").submit(function(){   
     //Call Script 2
});

And Third, If you are going to submit the form via AJAX and not through its default method, I would recommend using .preventDefault and then handle the flow of the submission inside the event handler function.

$("#theform").submit(function(e){   
     e.preventDefault();
     //rest of your code here.
});