Question

我有问题，我需要将两个脚本组合在一起。其中一个是验证，另一个是变量/ ajax脚本。我试过，但我不能让它工作。我把它放在检查它是否附加了needfilled元素的区域下的脚本中，但它提交时却没有执行ajax调用。

脚本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");
   }


});
});

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

脚本2中的代码需要进入脚本1，我在下面用注释标记;如果脚本2中的代码是通过ajax调用提交表单，那么如果没有找到错误，则不需要返回true，这样做会告诉表单正常提交。

if ($(":input").hasClass("needsfilled")) {
    return false;
} else {
    errornotice.hide(); 

    // SCRIPT 2 CODE HERE BEFORE THE RETURN

    // If the ajax call in script 2 is submitting your form via ajax then change
    // the line below to return false so your form doesn't submit
    return true;
}

Answer 2

除了@JeffWilbert给出的建议之外，我还将提供更多建议，以使您的代码更加清洁和高效。

首先，就像您在脚本1中所做的那样，您有一个字段名称数组，您可以对脚本2执行相同操作。下面是您可以执行的操作示例，使您的代码更具可读性。

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("&");

其次，如果脚本2不依赖于从脚本1声明的任何变量，我会将脚本2转换为它自己的函数并从脚本1中调用它。我认为像Jeff所建议的那样在其他内部添加所有代码并不是最好的。

function Script2(){
     //Script 2 Code
}

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

第三，如果您要通过AJAX而不是通过默认方法提交表单，我建议使用.preventDefault，然后在事件处理函数中处理提交流程。

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

组合2个Javascript / Jquery脚本

2 个答案: