Howto scroll down to form validation error when form invalid on submits in AngularJs?
Use the below link of code to
achieve for the same –
var
elm = $('input.ng-invalid select.ng-invalid');
if
(elm.length) {
elm.first().focus();
}
OR
angular.element('input.ng-invalid').first().focus();
OR
var
scrollIntoAppView = function () {
var
elt = $(".ng-invalid");
if
(elt.length) {
$('html, body').animate({
scrollTop:
(elt.first().offset().top)
}, 500);
}
}
Note: Use this above method on the top of you is submitting method.
2nd One Issue - Scroll
to first error in jQuery without a warning in JavaScript console
I am using below
code -
$('html,
body').animate({
scrollTop: ($('.has-error').first().offset().top)
}, 500);
The above code is working
fine but there is one small issue. The Issue Is - when no one field are
required in the form I am getting below issue.
In JavaScript
console, I get error - TypeError: $(...).first(...).offset(...) is undefined
Solution Is – check the length of invalid CSS is
grater then zero.
var
scrollIntoAppView = function () {
var
elt = $(".ng-invalid");
if
(elt.length) {
$('html, body').animate({
scrollTop:
(elt.first().offset().top)
}, 500);
}
}
OR
var
elm = $('input.ng-invalid select.ng-invalid');
if
(elm.length) {
elm.first().focus();
}
OR
angular.element('input.ng-invalid').first().focus();
I hope you enjoy with this
solutions. Thanks for your times.