获取标签以显示在表单字段的右侧 [英] Getting a label to display on the right side of a form field

查看:85
本文介绍了获取标签以显示在表单字段的右侧的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用dorm插件制作了一个动态表单的演示并在其中插入了一些验证.我只在两个字段上添加了验证(用户仅输入数字才输入前两个字段). http://jsfiddle.net/Xe3FG/4/ 如果用户在第一个字段示例"foo"上输入字符串,然后转到下一个字段,则在右侧请仅输入数字"上显示错误

I make a demo of dynamic form using dorm plugin and insert some validation on that.I just add validation on two fields (user only enter number only first two fields).It works on my fiddle. http://jsfiddle.net/Xe3FG/4/ If user enter string on first field example "foo"and go to next field it display error on right side "Please enter only numbers"

当我放置在弹出屏幕上时,表单具有相同的代码.我也在弹出窗口上获取字段.字段也进行验证,但错误消息出现在左侧,并且标签将其更改为位置.我们可以在右侧移动错误文本的位置吗?文字栏的一面?例如上面的小提琴? http://jsfiddle.net/HkGAx/22/

Same code of form when I placed on pop up screen .I am also getting field on the pop up .Field also validate but error message come one left side and label change it position.can we shift position of error text on right side of textfield ? as example on above fiddle? http://jsfiddle.net/HkGAx/22/

$("#testSuiteConfigurationform").validate(validateInputParameters());

function validateInputParameters() {
    jQuery.validator.addMethod("onlyNumbers", function(value, element) {
       // alert('dd')
        return value != "";
    }, " Please enter only numbers");

    var validation = {
        onfocusout : function(element) {
           $(element).valid();
        },
        rules : { 
            totalRetryCount: { onlyNumbers: true },
            totalRepeatCount:{onlyNumbers: true}
        },
    };
    return validation;
};

推荐答案

原因之一是标签的宽度为240像素-太多.另外,我在错误消息上应用了float.只需将此代码添加到您的.css样式中即可:

One of the reasons is width of label which is 240px - too many. Also, I've applied float right on error message. Just add this code to your .css styles:

#tabbedPopup label.error {
    float: right !important;
}

#tabbedPopup legend.ui-dform-legend {
    width: 134px !important;
}

JSFiddle上的演示.

这篇关于获取标签以显示在表单字段的右侧的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆