Как сделать так, чтобы проверка автоматически прокручивалась до первой ошибки сверху плавно, но не переходила к первой ошибочной ошибке? - PullRequest
0 голосов
/ 26 сентября 2018

Я попробую вот что, но это не сработает, прокрутка все равно подскакивает до недопустимой проверки ошибок.Пожалуйста, помогите мне с этим.

$(document).ready(function () {
$('#submit').click(function(){
    $('html,body').animate({scrollTop: 0},800);
    return false;
  });
});

Я пробовал много примеров в Google, но все не может работать.

1 Ответ

0 голосов
/ 26 сентября 2018

Проблема:

  1. Вы хотите использовать плавную прокрутку с проверкой проверки

  2. Вы хотите добавить фокус на первое недействительное поле ошибки

Решение: вам нужно использовать функцию обратного вызова jquery animate scrolltop, она будет срабатывать только после завершения анимации.

Проверьте приведенный ниже пример:

$('#submit').click(function () {
    $('html,body').animate({ scrollTop: 0 }, 800
        , function(){
            if ($('#tb1').val() == '') { $('#tb1').focus(); return; }
            if ($('#tb2').val() == '') { $('#tb2').focus(); return; }
            if ($('#country').val() == '--select country--') { $('#country').focus(); return; }
    });
    return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Name : <br />
<input type="text" id="tb1" required />
<br />

Age :<br />
<input type="text" id="tb2"  required />
<br />

Country :<br />
<select id="country">
<option>--select country--</option>
<option>India</option>
<option>USA</option>
<option>UK</option>
<option>China</option>
</select>

<br /><br /><br /><br /><br /><br /><br /><br />
<button id="submit">Click here!</button>
...