カスタム エラー メッセージと webshim による検証を含む HTML5 フォームを作成しました。これはほとんど機能しており、正しく表示されていますが、バブルはチェックボックスの下に表示されず、デフォルトでページの左上に表示されます。CSS が吹き出しを投げているのか、それとも表示されていない要素の下に表示しようとしているのかわからない。
これは私のマークアップです (送信ボタンを 2 つの別々のフォームの下に表示する必要があるため、構造は少し変わっています)。
<div id="appraisals-form" class="contact-form">
<form id="appform" role="form" method="post">
<div class="section-bar"></div>
<p class="section-title">Step 1</p>
<label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
<label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label>
<label for="phone"><span>Phone</span><input type="tel" class="input-field" name="phone" required data-errormessage-value-missing="Please enter your phone number." /></label>
<label for="art-type" class="wrap"><span class="wrap-lg">Type of Artwork</span><span class="wrap-sm">(i.e. sculpture, painting...)</span><input class="input-field" type="text" name="art-type" required data-errormessage-value-missing="Please enter your item's type of artwork."></label>
<label for="artist" class="wrap"><span class="wrap-lg">Artist Name</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="artist" required data-errormessage-value-missing="Please enter your item's artist."></label>
<label for="title" class="wrap"><span class="wrap-lg">Title of Piece</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="title" required data-errormessage-value-missing="Please enter your item's title."></label>
<label for="measurements"><span>Measurements</span><input type="text" class="input-field" name="measurements" required data-errormessage-value-missing="Please enter your item's measurements." /></label>
<label for="date" class="wrap"><span class="wrap-lg">Date / Age</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="date" required data-errormessage-value-missing="Please enter your item's date / age."></label>
<label for="condition"><span>Condition</span><textarea name="condition" class="textarea-field" required data-errormessage-value-missing="Please enter your item's condition."></textarea></label>
<label for="doc" class="wrap"><span class="wrap-lg">Documentation</span><span class="wrap-sm">(certificates, receipts, previous appraisals, etc.)</span><textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's documentation."></textarea></label>
<label for="writing" class="wrap"><span class="wrap-lg">Writing / Labels</span><span class="wrap-sm">(text or any writing or labels on the art)</span><textarea name="writing" class="textarea-field" required data-errormessage-value-missing="Please enter your item's text / labels."></textarea></label>
<label for="purchase-hist" class="wrap"><span class="wrap-lg">Purchase History</span><span class="wrap-sm">(date, cost, location, etc.)</span><textarea name="purchase-hist" class="textarea-field" required data-errormessage-value-missing="Please enter your item's purchase history."></textarea></label>
<label for="additional" class="wrap"><span class="wrap-lg">Additional Details</span><span class="wrap-sm">(anything else you know)</span><textarea name="additional" class="textarea-field" required data-errormessage-value-missing="Please enter your item's additional details."></textarea></label>
<fieldset id="appraisals-text-wrap">
<legend>Type of Appraisal</legend>
<input type="checkbox" data-grouprequired="" id="insurance" name="app-type" value="Insurance" /><label for="insurance">Insurance</label>
<input type="checkbox" id="donation" name="app-type" value="Donation" /><label for="donation">Donation</label>
<input type="checkbox" id="estate" name="app-type" value="General Estate Planning" /><label for="estate">General Estate Planning</label>
</fieldset>
</form>
<div class="section-bar"></div>
<p class="section-title">Step 2</p>
<p>Please upload images of all sides of your artwork.</p>
<div style="clear: both;"></div>
<form action="file-upload.php" class="dropzone" id="appraisals-upload">
<div class="dz-message">
<p><img src="img/ui/upload-cloud.png" /><p/>
<p><img src="img/ui/browse-button.jpg" /></p>
<p>Or drag & drop</p>
</div>
</form>
<input type="checkbox" data-grouprequired="" name="tac" value="Accepted T&Cs" /><label for="tac" style="font-size: 14px; font-weight: bold;">Terms & Conditions <span style="width: 100%; padding: 5px 0 13px; font-size: 14px; text-align: left; text-transform: none;">Duis lobortis nulla a eros porttitor, ut congue elit commodo. Nunc ut dapibus elit. Suspendisse euismod rhoncus felis, id vulputate mauris posuere vitae. Praesent bibendum maximus nibh, nec tempor diam blandit in. Praesent non metus in odio vehicula cursus vulputate quis quam. Nulla varius massa ac libero commodo imperdiet. Fusce tincidunt metus sapien, sed fringilla nibh vulputate eget. Suspendisse sodales nisi quis hendrerit porttitor. Morbi in augue sapien. Maecenas ultricies, nisl vitae vehicula vulputate, nunc tellus sagittis turpis, nec laoreet quam velit non nunc. In aliquam libero a tellus commodo, at aliquet risus imperdiet. Fusce finibus a nulla et facilisis.</span></label>
<div style="clear: both;"></div>
<div class="centred-button"><input type="submit" name="submit" value="" form="appform" class="submit-button" /></div>
</div>
デモ: http://jsfiddle.net/6bkv2vfz/ .
どんな助けでも本当に感謝します!