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中带有errorPlacement属性的文档来帮助自己。

<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验证中的标题

2 个答案: