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.
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|