从 jQuery 验证插件定位 CSS 类

Posted 2023-05-08

【中文标题】从 jQuery 验证插件定位 CSS 类

【英文标题】：Positioning CSS Class from jQuery Validation Plugin

【发布时间】：2013-11-19 19:19:55

【问题描述】：

我正在使用带有 jQ​​uery 验证插件的简单表单 https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js (http://jqueryvalidation.org/documentation/)

当 label .error 类被调用时，它会出现在输入字段下方。我怎样才能使它与正常的 label 名称内联显示

链接： i.imgur.com/KchiGeF.jpg

<label>Your Name</label>
<input name="phone" id="phone" required type="text"  size="40" >

jQuery 函数

$(document).ready(function () 

    $('#myform').validate( // initialize the plugin
        rules: 
            phone: 
                required: true,
                minlength:10
            

        
    );

);

【问题讨论】：

我会建议做一个 jsfiddle。

【参考方案1】：

在声明规则之前，请更改 errorElement。

errorElement: "span"

默认是label

$(document).ready(function () 
    $('#myform').validate( // initialize the plugin
        errorElement: "span",
        rules: 
            phone: 
                required: true,
                minlength:10
            
        
    );
);

【讨论】：

这行得通，谢谢。有什么办法让它在输入上方调用，使其与“电话”标签内联，还是需要更改 js？目前 .label 具有 10px 上下填充和 14px 字体

您可以尝试使用 CSS 伪类，或者将标签包裹在输入周围。但这可能需要更改 javascript

另外，如果它很好地解决了您的问题，请将其标记为正确答案:)

当我将它包裹在输入周围时，它只是内联显示它：（我会看看我是否可以相对定位它