I checked the forum posts and only found something about Angular and Core (I'm using Core and JQuery) https://support.aspnetzero.com/QA/Questions/5582
I did a bit of reading with regards to JQuery Validation and it leads me to believe that it should focus to the first element that failed validation.
We have a very large Modal form which is a few pages long (the boss wants it this way) my solution doesn't focus to the first invalid element.
I found an answer or sorts. https://stackoverflow.com/questions/9392133/when-form-is-validated-how-to-scroll-to-the-first-error-instead-of-jumping
Problem is I can't get it to work, if I replace the animate method with focus it works, but only when I click the "Save" button. If I push the "Enter" key on any other element it sets focus but also displays the modal validation error form.
_$employeeInformationForm.validate({
focusInvalid: false,
invalidHandler: function (form, validator) {
if (!validator.numberOfInvalids()) return;
$(validator.errorList[0].element).focus();
//$('html, body').animate({
// scrollTop: $(validator.errorList[0].element).offset().top
//}, 2000);
}
});
What do I need to do to get the solution to focus to the first element that failed validation ? To be honest the focus method isn't suitable since it can trigger other things like a dropdown opening of the datepicker opening the date selector.
2 Answer(s)
-
0
Have you seen this https://stackoverflow.com/a/10112388/6681451 ?
-
1
Again thanks for the awesome support, sadly I'm lacking knowledge with of JQuery and the JQuery validator. The documentation is a bit hard to follow sometimes.
The key item was onfocusout which was the reason why hitting the enter key on a element was causing the modal validation form to appear. Sadly I tried lots of things and I could get the animate method to work.
So if anyone else wants a quick and dirty solution to a muti-page modal form then this is your answer. Works quite well and will handle user pressing Enter on elements or clicking the Save button at the bottom of the modal form.
this.init = function (modalManager) { ...... _$employeeInformationForm.validate({ onfocusout: false, invalidHandler: function (form, validator) { if (!validator.numberOfInvalids()) return; $(validator.errorList[0].element).focus(); } });
