AutoFocus plugin

Focus on the first invalid element when submit form


You have to use this plugin with SubmitButton plugin which automatically validate the form when pressing the Submit button. The following piece of code is the starting point to use the AutoFocus plugin:


document.addEventListener('DOMContentLoaded', function(e) { FormValidation.formValidation( document.getElementById('demoForm'), { fields: { ... }, plugins: { autoFocus: new FormValidation.plugins.AutoFocus(), submitButton: new FormValidation.plugins.SubmitButton(), ... }, } ); });

The sample code above assumes that the FormValidation files are placed inside the vendors directory. You might need to change the path depending on where you place them on the server.

Basic example

Try to press the Add product button to see the first invalid field will be focused. Then fill in the Product name, press the Add product button again. The plugin will bring focus to the Description field which now becomes the first invalid field.