Ej2 FormValidator: How to scroll top when validation occur

[ISMAIL HAMZAH]

Dear support,

In one of my form, I have very long height page with browser vertical scrollbar.  How to scroll top when error occur? so the focus will be at the error form control and leaving the button.

After hit save button and if error occur, I want the page scroll to top automatically leaving the button view so user will aware at to upper form there are something wrong (error occur)

Thank you in advance

Best regards,

Ismail

[Indrajith Srinivasan]

Hi Ismail, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query ”How to scroll top when error occur? so the focus will be at the error form control and leaving the button”, you can achieve this requirement by manually focusing the invalid input element when the validation fails. We have also prepared a sample that tries to meet your requirements. 

 

Code blocks: 

 

 

document.getElementById('formId').addEventListener('submit', function (e) { 

  e.preventDefault(); 

  if (formObj.validate()) { 

    alert('Your form has been submitted.'); 

    formObj.reset(); 

  } else { 

    if (document.querySelectorAll('[aria-invalid="true"]')[0]) { 

      document.querySelectorAll('[aria-invalid="true"]')[0].focus(); 

    } 

  } 

}); 

 

 

Sample: https://stackblitz.com/edit/ca1htp?file=index.js 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[ISMAIL HAMZAH]

Hi Indrajith,

Thank you for your reply, it's work like a charm.

Best regards,

Ismail

[ISMAIL HAMZAH]

Hi Indrajith,

Additional question with same scenario, but for custom dialog modal? How to scroll top for custom dialog modal? because the validation is handled automatically by Grid:

Thank you,

Ismail 

[Berly Christopher]

Hi ISMAIL, 

Query: Additional question with same scenario, but for custom dialog modal? How to scroll top for custom dialog modal? because the validation is handled automatically by Grid:  

  

Based on your attached screenshot, we suspect that you have used the dialog template and you also want to move the scroller to top position when you press the submit button without satisfying the validation rules in the dialog template.  

So, we have prepared sample in that we have used the actionComplete event to bind the click event for the save button and in the click event we have manually focused the invalid input element when the validation fails. For your convenience we have attached the sample, please refer them for your reference.  

Code Example:  

Index.js  

 

actionComplete: function (args) {  

    if (args.requestType === 'add') { // while adding the record the focus will be changed to invalid input  

      args.dialog.ftrTemplateContent  

        .querySelector('.e-primary')  

        .addEventListener('click', (e) => {  

          var dialogEle = ej.grids.parentsUntil(e.target, 'e-dialog', false);  

 

          if (dialogEle) {  

            dialogEle.querySelector('[aria-invalid="true"]').focus();  

          }  

        });  

……  

    }  

 

Sample Link: https://stackblitz.com/edit/sc48f4?file=index.js  

Please get back to us if you need further assistance.  

Regards,  

Berly B.C 

[ISMAIL HAMZAH]

Hi Berly,

Thank you for your update. Your provided example work perfectly! It's awesome!:

Thank you for your kind support.

Best regards,

Ismail

[Berly Christopher]

Hi ISMAIL, 

Most welcome. Please let us know if you need further assistance on this. 

Regards, 

Berly B.C