Question

我有一个个人资料创建页面代码，我在用户注册时有几个字段要填写。在这个时代，我创建了一些必要的字段来填充创建的配置文件，因为我使用了Java Script，例如让我拿一个字段：

<div>
 <p><b>Past clients</b></p>
 <p><?php e($form->textarea('UserReference.past_clients',
   array('div'=>false,'label'=>false,'id'=>'past-client' , "class" => "forminput",
   "style"=>"width:675px; height:100px;font-family: Ubuntu, arial, vardana; 
   font-size: 14px; padding:10px 10px 20px;")));?>
 </p>
</div>

因此，为了捕获字段错误，我使用了id变量概念，默认值为null ＆安培;使用像

这样的Java脚本

            var imageName = jQuery.trim(jQuery('#image_name').val());
            if(imageName == 'profile.png')
            { 
                jQuery('#user-image').css('border-color','#F00');
                jQuery('#user-image').css('border-width','<?php e(ERROR_BORDER);?>px');
                jQuery('#user-image').focus();
                if(goingID==''){ goingID = 'user-image'; }
                myImagetip.setContent("Upload photo"); 
                myImagetip.show();
                flag++;
            }
            else
            {
                jQuery('#user-image').css('border-color','rgb(221, 221, 221)');
                jQuery('#user-image').css('border-width','<?php e(NORMAL_BORDER);?>px');
                myImagetip.hide();
            }

因此，每当用户没有填写必要字段时，该字段上会出现错误消息，但问题是光标在页面上没有第一个错误字段，如果用户保持为空，则在其上方滚动几个错误字段而不是顶部错误字段。谢谢！

Answer 1

首先，您必须将css类添加到无效的表单字段：

<input type="text" />
<input type="text" class="error" />
<input type="text" />

第二步，收集包含css-attribute error的所有输入字段，并确定与父级顶部距离最小的元素：

var lMin = -1;

$.each($('.error'), function() {

    var lTop = $(this).offset().top;
    if(lTop < lMin || lMin < 0)
    {
        lMin = lTop; 
    }
});

最后，滚动到与父级顶部距离最小的输入：

$('#myViewPort').scrollTop(lMin);

这是帮助您解决此问题的小提琴：http://jsfiddle.net/N62Dq/3/

在配置文件创建时出错需要光标滚动配置文件创建页面上的第一个错误

1 个答案: