Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

1.7 The Validate Utility

In this lesson, we're going to look at the AngularUI validate utility. And this of course is for validation in forms. Now, as you may know, Angular comes with many features for native validation. But there may be a few more complex cases that Angular on its own cannot handle. And that's when this validate utility will come in handy. We're here in our validate project. Let's go ahead and start with our app.js file, as usual. Now actually the only thing to do in here this time is require ui.validate. It's really that simple. So now let's create our little scenario. Now I'm going to use the same example that is used on the AngularUI website. Mainly because it's a good example of something that pretty much every web application will have. But the Angular doesn't natively support. And that is password confirmation. You've done it hundreds of times. It's where you type in the password twice when you're creating an account. And the passwords have to match before you can actually create the account. It just confirms that you actually know your password. Now of course that seems like a very common scenario, but it not something that Angular natively has any kinda tools for it. And of course, it would not be hard to roll on your own in Angular, but we're gonna use Angular UI's validate utility to do this. So in here, let's create a form. And we'll give a name, and we'll call it MyForm. And let's start with a paragraph here, and this will have an input element. It's name will be password. We don't have to give it an actual password type so that you can see what I'm typing here. Although of course, in a real web application, you would give this a type of password. It's important that we give it an ng model of password. And let's say that it is required as well. And now let's also add another paragraph here and this is gonna have a button. And this button will be our submit button. And let's do ng-disabled. And we will say that this button will be disabled if not my form valid. So this button will be disabled if myForm.$valid is not true. Now, myForm, of course, is this form that we're discussing here, the form that is a parent of this button. This Submit button will only be enabled if the form is valid. The ng-disabled attribute here will change the disabled attribute on this button based on the value of myForm. And right now, we can actually see this first feature in action. If I come here and, as you can see right now, submit is disabled. However, if I enable it you can see that I'm able to actually press the Submit button. If I remove everything from that textbox, it becomes disabled. So now, what we want to do is add a second field here and when these fields are equal the Submit button will be disabled. But if they do not match, then submit will continue to stay disabled. So, let's create another paragraph here and in here we have our new input. And this will have a name of confirm_password and of course we will give it an ng model of the same value confirm_password. We will say this too is required and that's all for the default values that you're used to, but we need to add some other ones and before I do that I'm going to put this on multiple lines just to make it a little easier to read. We need to add two other values. The first one is UI-Validate. Now this directive is similar to our ng-click directive or any of our other event handling directives. This takes either a JavaScript string or a reference to a function that's in our controller here. That will be run to actually validate this field. And of course if it returns true the field is validated and if it returns false the field is considered invalid. Now, what we would want to do in this, is say $value which is of course the value that was put in to this input, triple equals, and we'll say password in this case password of course refers to this controller's model password, which is the value of our first input here. When do we want this validation to be run? Well we can do that with ui-validate-watch, and this will watch another field and validate this field whenever that one changes. So, we do have to put this in quotes because it is expecting a JavaScript value. So it's our string within a string and of course this is the name of the field we're watching, which is our password model up here. Now, of course, we'll be able to see when these fields are invalid based on this field right here. However, we can also see this in a little more detail if we add some style here in here, and let's add a style for the .ng-invalid class, and the .ng-dirty class. And we'll just give it a border of 1 pixel solid red. And let's just make sure this is only for input elements, cuz the form will get these classes too. This border will only show up on elements that are both invalid and dirty meaning they have been changed. So if the input element is invalid because it has not been typed in yet, they will not get this. Let's come back to the browser here, refresh the page. You can see that off the top both of these are considered valid. However, I can start typing this one and if I backspace all the way you can see that it gets the red border because it's now both invalid and dirty. Now, if I start typing in here, I notice that as soon as I start typing the Submit button becomes available, that means there's a problem. Let me open up our console. And we don't have any errors off the top, so let's come back to our code here and okay, I can see where the error is here. The problem is, I just put this code here right in like that but this is actually expecting a string so I have to put $value === password inside quotes as well as the watch here. So all right. So now that that's in quotes, we can refresh this and let's try this again. So I'll say, we got our password there. Now, if I start typing here, okay, notice two things. First of all, Submit button is still disabled because this does not match that. Second, notice that there's a red box around our confirm field here because this is now both dirty because we have started to type in it, and it's invalid because it doesn't match asdf. And that is the UI validation directives in action here. Our validation code here, value equals password is being run. And since this isn't valid the directive is marking it as as such. So I can do sd. Still invalid. Notice that as soon as I type the f, that is no longer red and the Submit button is now enabled. Now like I said if you need to do a more complex validation than what we've done here, you don't just have to stick it in the validate here. For example, let's create a function here that would do that. So we can say $Scope and we'll just say dot validate password. And this will be a function. Let's take a value here as a parameter, and we'll say value === $scope.password. Right? So now, in here what we can do is say validate password, and pass it the value that we can get from this. If I refresh this. And now you can see it's working the same as it did before. If I continue typing, it's now red, and the button is disabled, and there you go. So, you can see, we can both perform the validation inline, or we can perform the validation in our controller here, but either way, the validation is being performed. Now of course this is only one way that you can use the validate utility but I find it an extremely handy and quick way to perform a task that you need to do in pretty much every web application.

Back to the top