重叠我同意 jQuery 验证中的标题

Question

我正在使用 jquery 验证插件，因为我同意表单和字段中的条款和条件，我实施了表单验证，但是对于我同意的条款和条件，我注意到标题是否在复选框的左侧它工作正常，如果我将复选框标题设置在右侧，那么错误消息现在重叠，如果您可以查看 jsfiddle 的演示，您可以轻松了解我的意思

这是代码

<form id="genForm"  method="post" action="">
    <label>Email:<input name="Email" type="email" required></label>       
<br>    
<label>
    <input type="checkbox" name="agree" value="1" required="required" />
        I accept the terms and conditions.</label>
    <br>
 <input class="btn primary" type="submit" value="Submit">
</form>

http://jsfiddle.net/x0wsq59p/

谢谢。

Answer 1

我对您的代码进行了一些编辑。请确保正确关闭 HTML 中的标签。

HTML:

<form id="genForm"  method="post" action="">
    <div class="container">
        <ul>
            <li>
                <label>Email:</label>
                <input name="Email" type="email" required="required"/>
            </li>                       
            <li>
                <input type="checkbox" name="agree" value="1" required="required" />
                <label>I accept the terms and conditions.</label>
            </li>
        </ul>
        <input class="btn primary" type="submit" value="Submit" />
    </div>
</form>

CSS:

.container {
    width: 50%     
}
label.error {
    float: right;
}

实际代码：

http://jsfiddle.net/x0wsq59p/12/

Answer 2

最后，在 jquery validate plugin with errorPlacement attributes.

文档的帮助下，我弄清楚了自己。

<form id="genForm"  method="post" action="">
    <table>
        <tr>
<td>

    <input type="checkbox" name="agree" value="1" required="required" />
        I accept the terms and conditions.
      <div class="rerror"></div>
</td>
    </tr>
</table>


 <input class="btn primary" type="submit" value="Submit">
</form>

jQuery 代码在这里

$("#genForm").validate({

 errorPlacement: function (error, element) {

        console.log($(element).next());

        $(element).next().html(error);
    },

});

http://jsfiddle.net/7u6Lqhmo/

希望对大家有所帮助:)

谢谢..

重叠我同意 jQuery 验证中的标题

Overlap I Agree Caption in jQuery Validation

javascript

validation

jquery

jquery-validate