いくつかのフィールドを持つ折りたたみ可能なコンテンツを作成し、検証のためにjquery.validationEngine.jsを使用しました。問題は、折りたたみ可能がtrueの場合、検証オプションが表示されませんが、falseの場合は正常に機能しますcollapsible を false に設定する必要がある折りたたみ可能なコンテンツのエラー。
HTMLページのコードは次のとおりです。
<div data-role="collapsible" id='collapsible_2' data-theme="b" data-content-theme="c" style="padding-bottom: 10px">
<h3>Contact Information</h3>
<p align="left" style="margin-bottom: 2px"><font color="#3C6FA1"><b>EMAIL ADDRESS</b></font></p>
<hr>
<input class="validate[required] text-input" id="email_id" name="emailId" type="text" placeholder="name@sample.com" >
<p align="left" style="margin-bottom: 2px"><font color="#3C6FA1"><b>PHONE NUMBER</b></font></p>
<hr>
<input class="validate[required] text-input" id="main" name="main" type="number" min="0" max="9" maxlength="10" placeholder="Main" >
<input class="validate[required] text-input" id="mobile" name="mobile" type="text" placeholder="Mobile" >
<p align="left" style="margin-bottom: 2px"><font color="#3C6FA1"><b>FAX NUMBER</b></font></p>
<hr>
<input class="validate[required] text-input"id="fax" name="fax" type="text" placeholder="Fax" >
<p align="left" style="margin-bottom: 2px"><font color="#3C6FA1"><b>WEBSITE</b></font></p>
<hr>
<input class="validate[required] text-input" id="website" name="website" type="text" placeholder="Website" >
<p align="left" style="margin-bottom: 2px"><font color="#3C6FA1"><b>ADDRESS</b></font></p>
<hr>
<input class="validate[required] text-input" id="street_address" name="street_address" type="text" placeholder="Street Address">
<input class="validate[required] text-input" id="city" name="city" type="text" placeholder="City">
<input class="validate[required] text-input" id="Region" name="Region" type="text" placeholder="Region">
<input class="validate[required] text-input" id="postal_code" name="postal_code" type="text" placeholder="Postal Code">
<select name="select-choice-c" id="select-choice-c" data-native-menu="false" data-theme="a">
<option>Select Country</option>
<option value="standard">India</option>
<option value="rush">Australia</option>
<option value="express">England</option>
<option value="overnight">SriLanka</option>
</select>
</div>
ここに私が使用したJavaスクリプトがあります:
jQuery(document).ready( function() {
// binds form submission and fields to the validation engine
jQuery("#formID").validationEngine();
});
設計と検証に使用した js ファイルと css ファイルは次のとおりです。
<head>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="contactcss/jquery.mobile-1.3.1.min.css"/>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.7.0.js"></script>
</head>