if(jQuery('.required_content').length){
jQuery('.second_indiv_step_wrap').animate({scrollTop:jQuery('.required_content').first().offset().top - 96}, 'fast');
}
你怎么看我有一个表单，我用 js 来验证它，没关系，我的问题与每次我们将有空输入字段时滚动到第一条错误消息有关。但似乎代码根本不起作用。
最佳答案
根据您在 jsFiddle 中的代码，您使用了很多内联样式。
此外，您不必为每个字段编写 if 条件。
所以我已经清理了代码。
这对我有用。
<!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>
关于javascript - 无法滚动到第一个错误消息字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31694963/