Fatal编程技术网
  • javascript/
  • Javascript can'；t使滚动到第一个错误消息字段

Javascript can'；t使滚动到第一个错误消息字段

javascript jquery html css scroll

Javascript can'；t使滚动到第一个错误消息字段,javascript,jquery,html,css,scroll,Javascript,Jquery,Html,Css,Scroll,你怎么看我有一个表单，用js我在做它的验证，没关系，我的问题是每次我们有空的输入字段时滚动到第一条错误消息。但是代码似乎根本不起作用。根据您在JSFIDLE中的代码，您已经使用了很多内嵌样式 此外，您不必为每个字段编写if条件 所以我已经清理了代码 这对我很有用 if(jQuery('.required_content').length){ jQuery('.second_indiv_step_wrap').animate({scrollTop:jQuery('.required_conte

你怎么看我有一个表单，用js我在做它的验证，没关系，我的问题是每次我们有空的输入字段时滚动到第一条错误消息。但是代码似乎根本不起作用。

根据您在JSFIDLE中的代码，您已经使用了很多内嵌样式

此外，您不必为每个字段编写
if条件

所以我已经清理了代码

这对我很有用

if(jQuery('.required_content').length){
  jQuery('.second_indiv_step_wrap').animate({scrollTop:jQuery('.required_content').first().offset().top - 96}, 'fast');
    }


形式
.第二步独立包装{
利润率：20px；
}
.second_indiv_step_wrap>div{
利润率：20px0；
}
标签{
显示：块；
}
输入{
显示：块；
宽度：250px；
}
文本区{
显示：块；
宽度：250px；
调整大小：无；
高度：200px；
}
.下一秒{
边缘顶部：20px；
填充：10px 15px；
光标：指针；
显示：内联块；
}
.必填字段{
边框：1px实心rgb（11,75,132）；
最小高度：52px；
字号：18px；
文本对齐：居中；
颜色：rgb（102102102）；
背景：rgb（255、255、255）；
}
.所需内容，.错误\u x\u白色{
显示：无；
颜色：rgb（244,73,68）；
}
.表演{
显示：块；
}
.错误{
边界：0无；
背景：rgb（244,73,68）；
}
要求的
姓
请输入姓氏。
要求的
名字
请输入名字。
要求的
国家
请输入您的国家。
要求的
地址
请输入您的地址。
提交此表格
$（'.next_second'）。在（'click'，函数（）{
$（'.required field'）。每个（函数（）{
if（$（this.val（）=''）{
$（this.addClass（'error'）；
$（this.parent（）.parent（）.find（'.required_content'）.addClass（'show'）；
$（this.parent（）.parent（）.find（'.error_x_white'）.addClass（'show'）；
}否则{
$（this.removeClass（'error'）；
$（this.parent（）.parent（）.find（'.required_content'）.removeClass（'show'）；
$（this.parent（）.parent（）.find（'.error_x_white'）.removeClass（'show'）；
}
});
setTimeout（函数（）{
$（'.second_indiv_step_wrap.error'）.first（）.focus（）；
$（'.error'）。解除绑定（'keypress'）；
$（'.error'）.bind（'keypress'，function（）{
$（this.removeClass（'error'）；
});
}, 100);
});
使用标记的focus（）函数。比如$（“#xyz”）.focus（）；你能给我举个例子吗？@bharattateljquery（“输入[type=text]”）。每个（函数（）{if（jQuery（this.val（）=''）{jQuery（this.focus（）；返回false；}}）；在验证之后，试试这个。也许这有助于检查此url。检查此代码非常好，而且确实有效，但我的问题是，我的错误消息位于输入字段@Vinod MurukeSensory上，我无法理解，您需要它如何工作，我已根据您的JSFIDLE代码创建了上述代码，如果您可以上传您实际需求的图像并将路径发送给我，那我也许能帮上忙。谢谢，我对你的代码做了一些修改，但它对我有帮助@Vinod Murukesan 
<!doctype html>
<html lang="en">
<head>
    <title>Form</title>
    <style type="text/css">
        .second_indiv_step_wrap {
            margin: 20px;
        }
        .second_indiv_step_wrap > div {
            margin:20px 0 0 0;
        }
        label {
            display:block;
        }
        input {
            display:block;
            width:250px;
        }
        textarea {
            display:block;
            width:250px;
            resize:none;
            height:200px;
        }
        .next_second {
            margin-top:20px;
            padding: 10px 15px;
            cursor:pointer;
            display:inline-block;
        }
        .required-field {
            border: 1px solid rgb(11, 75, 132);
            min-height: 52px;
            font-size: 18px;
            text-align: center;
            color: rgb(102, 102, 102);
            background: rgb(255, 255, 255);
        }
        .required_content, .error_x_white {
            display:none;
            color:rgb(244, 73, 68);
        }
        .show {
            display:block;
        }
        .error {
            border:0 none;
            background: rgb(244, 73, 68);
        }
    </style>
</head>
<body>
    <div class="second_indiv_step_wrap">

        <div class="surname">   
            <span class="required_content">Required</span>
            <div class="fieldWrap placeholder-hide">
                <label for="surname">Surname</label>
                <input type="text" name="Surname" id="surname" class="required-field">
            </div>  
            <span class="error_x_white">Please enter surname.</span>
        </div>

        <div class="firstname"> 
            <span class="required_content">Required</span>
            <div class="fieldWrap placeholder-hide">
                <label for="firstname">First Name</label>
                <input type="text" name="FirstName" id="firstname" class="required-field">
            </div>  
            <span class="error_x_white">Please enter first name.</span>
        </div>

        <div class="country_citizenship">   
            <span class="required_content">Required</span>
            <div class="fieldWrap placeholder-hide">
                <label for="autocomplete">Country</label>
                <input type="text" name="autocomplete" id="autocomplete" autocomplete="off" class="ui-autocomplete-input required-field">
            </div>  
            <span class="error_x_white">Please enter your country.</span>
        </div>

        <div class="residental_address">    
            <span class="required_content">Required</span>
            <div class="fieldWrap">
                <label for="pinrestextarea">Address</label>
                <textarea id="pinrestextarea" name="Principal residential address" class="required-field"></textarea>
            </div>  
            <span class="error_x_white">Please enter your address.</span>
        </div>

        <button class="next_second">Submit this form</button>

    </div>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $('.next_second').on('click', function () {

            $('.required-field').each(function () {

                if ($(this).val() == '') {
                    $(this).addClass('error');
                    $(this).parent().parent().find('.required_content').addClass('show');
                    $(this).parent().parent().find('.error_x_white').addClass('show');
                } else {
                    $(this).removeClass('error');
                    $(this).parent().parent().find('.required_content').removeClass('show');
                    $(this).parent().parent().find('.error_x_white').removeClass('show');
                }

            });

            setTimeout(function () {
                $('.second_indiv_step_wrap .error').first().focus();

                $('.error').unbind('keypress');
                $('.error').bind('keypress', function(){
                    $(this).removeClass('error');
                });
            }, 100);

        });

    </script>
</body>
</html>