Alpine.js Crash Course #7 - Using x-if

Key Takeaways

okay then gang in the previous lesson we made a function to handle form submissions and we did some validation on the input values too we also made this errors property which stores error messages for any input fields that failed the validation for example if the username field failed validation we added a username property to the error and if the password failed then we added the password property and so on and all those areas get populated only after we submit the form right so now what I'd like to do is output those areas in the form template if we have any so that a user can see which inputs need correcting and to do this we need to conditionally output the error messages only if they exist on the errors object now when we use Alpine rendering some conditional template is really easy to do by using a directive called xen if but there is a small catch we can't use this directive on any regular HTML element it has to be used on a template element so let me demon this and then we'll talk a little bit more about it so we need a template tag first of all so let's make one of those and then on this template tag we can use the X hyphen if directive to check if a certain condition is true so I could just check to see if we have a value for errors. password for example now if this password property exists on the errors object then this will evaluate as true and Alpine would then inject whatever HTML content was nested in this template into the Dom and then if this ever became false for example if the errors object got reset and the password property no longer existed then Alpine at that moment would remove the nested content directly from the Dom and that is important when we use xive Alpine actively inserts and removes content from the Dom it doesn't just show and hide it there is a different directive called X show which we can use to only show and hide content but we're going to see that later in the course for now let's add some content inside this template tag so the only thing we really want to do is output the error message that we attach right so whatever this is right here and that is on the property itself so errors. password for example so I'm going to create a paragraph tag with a class of error and the reason I give with this class is because it's already styled in styles.css to make it red and then also for this we want Dynamic text so we use the XY text directive and we set it equal to errors do password so whatever that property value is and that's all there is to it so now what I'm going to do is copy this and I'm going to paste it underneath each individual input field so first of all up here the username we need to make sure we update this to be username that's what we're checking for and obviously this as well is username and then down here we have another one for the password the password confirm so let's paste this in and this time it's password confirm and down here password confirm and then we have this one which is the belt color so let me grab that and this and change it to belt and then down here which one's this this is the bio let's do it at the bottom of this and change this and this to bio and then finally down here okay we don't need any error for the newsletter that is just a boo in toggle it's either true or false and there's never any kind of error with it it's either unchecked or checked right so now we can save this and try it out okay so I'm not going to fill anything in and all the validation errors should show except for confirmed password but the rest should show let's submit and yeah we can see those so the username must be at least three characters password six select a belt color bio must be at least 10 okay let's fill some of these in I'm going to say Mario and then down here we'll say test one two for the confirm password I'm just going to say test one and then for the belt color we'll say white let's go for black actually and then say hello I like toast all right then so let us submit this form and now the only error we get is passwords do not match if we add a two on here and click submit all the errors go away and the form gets reset awesome