Topic: Focus first invalid form field on form submit

ionyx pro asked 5 years ago


Expected behavior

When you submit a form, that has missing required input or has invalid data (e.g. malformed email), after clicking form submit user should be shown the invalid field (focus).

Actual behavior

If long form, screen stays at bottom of form and you cannot see invalid fields without having to scroll up

Also, if we are using tabs, it should activate the tab with the error and move focus to the input field within that tab.

example form: https://mdbootstrap.com/snippets/jquery/ionyx/1029664?action=forum_snippet


MDBootstrap staff answered 5 years ago


Hi sundance,

as ionyx said we are using pseudoclass :invalid on input as states in our validation documentation. This is not accessible by js but to show errors we are using div which gets class "invalid-feedback". This div is always the first sibling of the input. You can access this div and by jq functions get back to another sibling with function as follows: $('.invalid-feedback').siblings('input')

To answer ionyx question I created a snippet example. You have to pass $('.invalid-feedback').first() element instead of my $('#phone') in this js for example after sending form when invalid elements are created.

If you need additional help I am here for you.

Best Regards, Piotr


ionyx pro answered 5 years ago


through trial and error I was able to adjust the submit eventlistner and look to focus on:

$(form).find(".form-control:invalid").focus();
$(form).find(".form-check-input:invalid").focus();

So this is within that load JS:

(function() { 'use strict'; window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); $('#ajax_loader').hide(); // find first error field $(form).find(".form-control:invalid").focus(); $(form).find(".form-check-input:invalid").focus(); } form.classList.add('was-validated'); }, false); }); }, false); })();

Obviously I need to add some checks to see if it is a standard form input or a check-input etc and then focus on that one.

Any tips on finding the tab for that error element? Just use jQuery .closest to find the tab and programatically open it? Any snippets u might have would be appreciated

Thank you


ionyx pro answered 5 years ago


Hi

All I am asking for is for some guidance on how to find the input field that has failed the validation. Is there a class or attribute that gets added to the error field that I can search for using jQuery? I'm not asking you to build anything further.

Thank you


ionyx pro answered 5 years ago


Yes, please provide details of how to target a field with error condition. I cannot see an "error" class being added or similar which would help with targeting.

Please provide an example and how to activate another tab that has an invalid form field.

Thank you


MDBootstrap staff commented 5 years ago

That is exactly the problem I tried to point. When we support by default picking the error field you can always place it in tabs or even alert. We can not predict every single use case of this component and make such a feature flawless. We will create a new form of validation in the future. Right now there is no out of the box solution for this. We support such usage of form in stepper component: https://mdbootstrap.com/docs/jquery/components/stepper/


MDBootstrap staff answered 5 years ago


Hi ionyx,

If the form is invalid you can always set this behaviour to serve your needs. Focusing certain objects in forms can cause many problems if we set it by default without considering other mdb components. We can make it a task to do if there will be a big user need for this feature.

You can always set focus on the object you want after the form failed to send because of the required value.

If you need additional help I am here for you.

Best Regards, Piotr



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.5
  • Device: Mac
  • Browser: Chrome
  • OS: osx
  • Provided sample code: No
  • Provided link: Yes