これに多くの時間を費やした後、最終的にここに投稿することにしました。実際には、単一ページの 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) コードは次のとおりです。 [このファイルには、フォーム ID が異なる 6 つのフォームがあります。しかし、フィールド className は同じです。ここに投稿するフォームは 1 つだけです。他はすべて同じです]
<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>
今。このコードでは、フォーム データを送信できません。すべてのフィールドが入力され、データを送信する代わりに送信ボタンがクリックされると、最初のフィールド検証エラー メッセージが表示されます。そして、この問題の根源は、同じ className フィールドを持つ複数のフォームを持つことだと思います。したがって、送信ボタンを押すと、他のフォームから同じフィールドがチェックされます。
私の実際の質問よりも: フォームが ajax 経由で読み込まれ、複数のフォーム (連絡先、問い合わせ、苦情、その他など) がある場合、どのように ajax を使用してフォーム データを送信できますか。
感謝と敬意