![](https://i0.wp.com/www.lopau.com/wp-content/uploads/2019/10/lightning-component.png?resize=200%2C200&ssl=1)
Learn how to validate lightning components forms easily.
I recently had a requirement to create a basic lightning component to capture form inputs. I previously had a not so good experience with building custom validation with Lightning components back in Summer17 when lightning was pretty new. I was using force:inputField and also used lightning:inputField.
Past few years it has become more efficient and easier with just the lightning:input field and default HTML5 APIs.
I have a simple bank form that captures and validates the form as such and when submitted validates the required fields.
![Form](https://i0.wp.com/www.lopau.com/wp-content/uploads/2019/10/Screen-Shot-2019-10-17-at-11.56.12-PM.png?resize=900%2C151&ssl=1)
![](https://i0.wp.com/www.lopau.com/wp-content/uploads/2019/10/Screen-Shot-2019-10-18-at-12.00.09-AM.png?resize=900%2C156&ssl=1)
For the Bank Account Name input field specify the required attribute as true and check the validity of the field.
I use reportValidity to display the error message in the input field
And for the Bank Account Number input field aside from setting the field as true, I also specified a regular expression pattern. And then used the setCustomValidity function to display a custom error message.
![](https://i0.wp.com/www.lopau.com/wp-content/uploads/2019/10/Screen-Shot-2019-10-18-at-12.02.07-AM.png?resize=900%2C228&ssl=1)
And that folks, is how easy to validate the input form. Hit the comments below if you need help building your validation.
[…] Promises has been around for a while but only got the chance to use it on some of the aura component pieces I started working […]