jQuery 検証を使用してフォームを検証しています。フォームは次のようになります。
<div id="app_install_off" class="edit-ph mtop20"><h3 class="stakes-form-title-saved">APP INSTALL <span class="blue-txt"><!--(saved)--></span></h3><a href="#"><img border="0" align="right" style="margin:0 15px 0 0" src="../img/edit-button.png"></a></div>
<div id="app_install_on" class="appinstall-ph">
<form novalidate="novalidate" action="/sweepstakes/campaignstep2" id="AppInstallTaskCampaignstep2Form" method="post" accept-charset="utf-8"><div style="display:none;"><input name="_method" value="POST" type="hidden"></div> <div class="form-header"><h3 class="stakes-form-title">APP INSTALL <span class="greentext">(not saved)</span></h3></div>
<div class="form-content-area">
<div class="app-field-ph">
<ul class="apps-form">
<li class="f-label">App Name</li>
<li class="input-ph"><div class="input text"><input name="data[AppInstallTask][task_title]" class="appsform-field" id="AppInstallTaskTaskTitle" border="0" type="text"></div></li>
</ul>
<ul class="apps-form whitebg">
<li class="f-label">Package Name</li>
<li class="input-ph"><div class="input text"><input name="data[AppInstallTask][app_package_name]" class="appsform-field" value="Example: Com.MyAppPackage" id="AppInstallTaskAppPackageName" border="0" type="text"></div></li>
</ul>
<ul class="apps-form">
<li class="f-label">Market URL</li>
<li class="input-ph"><div class="input text"><input name="data[AppInstallTask][web_url]" class="appsform-field" id="AppInstallTaskWebUrl" border="0" type="text"></div></li>
</ul>
</div>
<div class="save-clear-ph">
<a href="#"><img src="../img/clear-button.png" border="0"></a>
<a href="Javascript:void(0)"><img id="app_install_submit" src="../img/save-button.png" border="0"></a>
<input name="data[AppInstallTask][task_type]" value="Download an App" id="AppInstallTaskTaskType" type="hidden"> </div>
</div>
</form>
</div>
</div>
<!-- The next similar block -->
<div id="like_fb_on" class="appinstall-ph mtop20">
<form action="/sweepstakes/campaignstep2" id="LikeFbTaskCampaignstep2Form" enctype="multipart/form-data" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"/></div> <div class="form-header"><h3 class="stakes-form-title">LIKE FACEBOOK PAGE <span class="greentext">(not saved)</span></h3></div>
<div class="form-content-area">
<div class="app-field-ph">
<ul class="apps-form">
<li class="f-label">Campaign Option Name</li>
<li class="input-ph"><div class="input text"><input name="data[LikeFbTask][task_title]" class="appsform-field" border="0" type="text" id="LikeFbTaskTaskTitle"/></div></li>
</ul>
<ul class="apps-form whitebg">
<li class="f-label">Facebook Page URL</li>
<li class="input-ph"><div class="input text"><input name="data[LikeFbTask][web_url]" class="appsform-field" border="0" type="text" id="LikeFbTaskWebUrl"/></div></li>
</ul>
</div>
<div class="save-clear-ph">
<a href="#"><img src="../img/clear-button.png" border="0"></a>
<a href="#"><img src="../img/save-button.png" border="0"></a>
<input type="hidden" name="data[LikeFbTask][task_type]" value="Like Facebook Page" id="LikeFbTaskTaskType"/> </div>
</div>
</form>
</div>
画像 (id = "app_install_submit") をクリックすると、フォームが送信されます。jQuery 検証は次のように実装されます。
$(document).ready(function() {
jQuery('#AppInstallTaskCampaignstep2Form').validate({
rules: {
"data[AppInstallTask][task_title]": {
required: true
},
customMessage: "required",
}
});
});
クリックイベントは次のとおりです。
$('#app_install_submit').click(function(){
$('#AppInstallTaskCampaignstep2Form').submit();
});
これも ready() 内にラップされています。
これは初めて機能し、エラー クラスのフィールドが強調表示され、メッセージがラベルに追加されます。さらにクリックすると、次の「悪夢のような」エラーが発生します。
TypeError: 'undefined' は関数ではありません ('this.each' を評価しています)
また、フォームは実際には適切に検証されますが、送信は拒否されます。
jQuery バージョン: v1.10.1
プラグイン バージョンの検証: 1.9.0
注: このページには他のフォームがあり、それらには別の ID があり、フィールド名も競合していません。また、きちんと確認しましたが、フォームの重複はありません。さらに不満を募らせているのは、この同じファイル セットが、サイトの他のページでも機能することです。
私が間違っているかもしれないポインタを楽しみにしています。
よろしくお願いします。