In this lecture, we're going to start handling form submissions for the registration form.
Validation will play a part in this process.
Users shouldn't be able to submit the form until every field is valid.
The form group object contains properties for checking the validity of the form.
In the resource section of this lecture, I provide a link to the Form Group class.
We've talked about this already, but I want to mention it again on this page.
We will find the class definition for the Form Group Class.
The Form Group class extends the abstract control class.
Statuses are not exclusive to form controls.
We have access to the same properties we had on the form control class.
This means we can check the current validation status of our form.
Unlike before, the values for these properties will present an entire form instead of a single field.
For example, we have a property called valid.
If we have one invalid field, the entire form is invalid.
We can expect this property to return false.
We will use these properties to prevent the form from being submitted if the form is invalid.
Let's get started.
Open the register template file in your editor.
First, we should prevent users from submitting the form if the entire form is invalid.
We can disable the button in our form to prevent users from submitting the form.
The button for the form can be found at the bottom of the form.
On this element, we will bind the disabled attribute to the register form dot invalid property.
The invalid property will store a Boolean value based on the validity of the form.
It'll be set to true if the form is invalid.
The binding should effectively stop users from submitting the form if there are issues before moving
forward.
We should make it visually obvious the button is disabled by default tailwind reset styles for most
elements in the browser.
The appearance of the button may look the same, whether it's disabled or not.
It's considered good practice to give visual cues for interactive elements.
In the resource section of this lecture, I provide a link to a list of classes for Element States.
Every class we apply to an element will change a property, on the other hand, we may not want to immediately
change the property of an element.
It's possible to apply properties based on a state of an element.
For example, we can apply properties for when an element is being hovered over.
In our case, we want to change the appearance of the button if it's disabled on the sidebar.
There's a section called disabled.
Right away, we will be presented with an example relative to our current situation.
If you want to change the appearance of a disabled button, we need to prefix a class with the disabled
prefixed.
This example shows us how a button's appearance will change based on the buttons disabled property.
Let's copy the class from this example.
The opacity 50 class will change in elements opacity by 50 percent.
I think changing the opacity will work for our form.
Back in the template, we will paste this class into the button element.
If we look closely, we will find another example of a variant for when the user hovers their mouse
over this element.
The background colour of the button will become darker.
We can change the appearance of an element by fixing the classes with the appropriate variant.
We're not done yet.
We should disable the hover effect.
Otherwise, the user may think they can click on the button.
The disabled classes can override hover classes if they effect the same property.
Let's add the following class disabled big indigo four hundred.
The original color was 400, the hover effect can be disabled if the background color remains the same
after making those changes.
Let's test our form refresh the page in the browser.
Initially, the form is disabled.
Keep in mind, validation is performed right away.
The error messages are not appearing because the fields haven't been touched.
We've added structural directives to the error messages to prevent them from appearing.
We want to give the user a chance to fill out the form.
Next, let's try filling out the form with valid values.
After filling out the form, the button is enabled, we can move on to submitting the form.
We will handle this task in the next lecture.