Focus first invalid form field on form submit

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

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

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

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

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