webshim HTML5 验证气泡显示不正确

Question

我创建了一个 HTML5 表单，其中包含自定义错误消息并通过 webshim 进行了验证，该表单大部分工作正常并且显示正确，但气泡未显示在复选框下方，默认显示在左上角页面的。我不确定我的 CSS 是否正在抛出气泡，或者它是否试图显示在我没有显示的元素下。

这是我的标记（结构有点不寻常，因为我需要在两个单独的表单下显示提交按钮）：

<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/.

任何帮助将不胜感激！

Answer 1

试试这个：

input[type="checkbox"] {
    /* display: none; */
    visibility: hidden;
    margin-right: -15px;
}

当你放显示none时，他们找不到checkbox的当前位置

webshim HTML5 验证气泡显示不正确

webshim HTML5 validation bubble not displaying correctly

html

forms

webshim