在花了很多时间之后，我终于决定在这里发帖。实际上我正在尝试制作一个单页 webapp，因此联系表单是通过 ajax '.load()' 函数加载的：
$('.formWrap').load('contactForm.html',function(){
加载成功后，我尝试使用ajax进行提交过程，所以我使用了这段代码：
var form = {
load: function(){
$('.formWrap').load('contactForm.html',function(){
form.formFunc.formBind();
});
***form.click();***
},
****click: function(){
$('html').on("click","#contactSubmitButton",function(e) {
e.preventDefault();
form.formFunc.sidebarvalidateForm($(this).attr('data-formId'));
});
},****
formFunc: {
formBind: function(){
$('#sidebarformSuccessMessageWrap').hide();
$('.sidebarformValidationError').hide();
$('input[type="text"], input[type="password"], textarea').focus(function(){
if($(this).val() == $(this).attr('data-dummy')){
$(this).val('');
};
});
$('input, textarea').blur(function(){
if($(this).val() == ''){
$(this).val($(this).attr('data-dummy'));
};
});
},
sidebarsubmitData: function(currentForm, formType){
Anu.Config.sidebarformSubmitted = 'true';
var formInput = $('#' + currentForm).serialize();
$.post($('#' + currentForm).attr('action'),formInput, function(data){
$('#' + currentForm).hide();
$('#sidebarformSuccessMessageWrap').fadeIn(500);
setTimeout(function(){
$('#sidebarformSuccessMessageWrap').fadeOut(500);
$('#successinfo').fadeIn(500);
$('.contact-form').slideUp("slow", function() {
$('.contact-form').hide();
});
},5000);
});
},
sidebarvalidateForm: function(currentForm, formType){
$('.sidebarformValidationError').hide();
$('.sidebarfieldHasError').removeClass('sidebarfieldHasError');
$('#' + currentForm + ' .sidebarrequiredField').each(function(i){
if($(this).val() == '' || $(this).val() == $(this).attr('data-dummy')){
$(this).val($(this).attr('data-dummy'));
$(this).focus();
$(this).addClass('fieldHasError');
$('#' + $(this).attr('id') + 'Error').show();
return false;
};
if($(this).hasClass('sidebarrequiredEmailField')){
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var tempField = '#' + $(this).attr('id');
if(!emailReg.test($(tempField).val())) {
$(tempField).focus();
$(tempField).addClass('sidebarfieldHasError');
$(tempField + 'Error2').show();
return false;
};
};
if(Anu.Config.sidebarformSubmitted == 'false' && i == $('#' + currentForm + ' .sidebarrequiredField').length - 1){
Anu.formFunc.sidebarsubmitData(currentForm, formType);
};
});
}
}
}
并将此函数称为：
$(document).ready(form.load);
表单 html (contactForm.html) 代码是： [此文件中有 6 个表单，具有不同的 FORM ID。但字段类名是相同的。我在这里只发一张表格，其他的都一样]
<form class="contactForm" id="contactForm" action='contact-send.php' method='post' enctype='multipart/form-data'>
<span class="sidebarformValidationError" id="contactNameFieldError">
<div class="sidebar-small-notification">
<p>Error Sending! Please enter your name!</p>
</div>
</span>
<span class="sidebarformValidationError" id="contactEmailFieldError">
<div class="sidebar-small-notification">
<p>Error Sending! Mail address required!</p>
</div>
</span>
<span class="sidebarformValidationError" id="contactEmailFieldError2">
<div class="sidebar-small-notification">
<p>Error Sending! Valid Email Address Required</p>
</div>
</span>
<span class="sidebarformValidationError" id="contactSubjectFieldError">
<div class="sidebar-small-notification">
<p>Error Sending! Subject field is empty!</p>
</div>
</span>
<span class="sidebarformValidationError" id="contactMessageTextareaError">
<div class="sidebar-small-notification">
<p>Error Sending! Message field is empty!</p>
</div>
</span>
<input type="text" class="sidebar-input required sidebarrequiredField first" autocomplete="off" placeholder="Name" required name="contactNameField" id="contactNameField" /><span class="clear-input"></span>
<input type="text" class="sidebar-input sidebarrequiredEmailField required sidebarrequiredField" placeholder="Email" required name="contactEmailField" id="contactEmailField" /><span class="clear-input"></span>
<input type="text" class="sidebar-input required sidebarrequiredField" placeholder="Subject" required name="contactSubjectField" id="contactSubjectField" /><span class="clear-input"></span>
<textarea class="sidebar-textarea required sidebarrequiredField last" required placeholder="Enter Your message Here" name="contactMessageTextarea" id="contactMessageTextarea"></textarea><span class="clear-area"></span>
<input type="submit" value="Submit" class="sidebar-button" id="contactSubmitButton" data-formId="contactForm"/>
</form>
现在。使用此代码，我无法提交表单数据。当所有字段都填满并单击提交按钮时，它会显示第一个字段验证错误消息。而且我认为这个问题的根源是：拥有多个具有相同类名字段的表单。所以当我按下提交按钮时，它会从其他表单中检查相同的字段。
比我实际的问题是：如果表单是通过 ajax 加载并且有多个表单（联系人、查询、投诉等），我如何使用 ajax 提交表单数据。
感谢和重新毕业