AngularJS
What is $Scope in AngularJS? Tutorial with Example
What is $scope in AngularJS? $scope in AngularJS is a built-in object which basically binds the...
AngularJS Form Validation: TextBox, Button Click [Example]
- Details
Validation is the process ensuring that data is correct and complete.
In a real-world example, let's assume a site which requires a registration form to be completed before getting full access to this site. The registration page would have input fields for username, password, email id and so forth.
When the user submits the form, normally a validation would occur first before the details are sent to the server. This validation would try to ensure to the best possible extent that the details for the input fields are entered in the right manner.
For example, the email id always needs to be in a format of This email address is being protected from spambots. You need JavaScript enabled to view it.; if someone enters just the username in the email id, then ideally the validation should fail. So validation looks at doing these basic checks before the details are sent to the server for further processing.
In this tutorial, you will learn-
- Form validation using HTML5
- Form validation using $dirty, $valid, $invalid, $pristine
- Form validation using AngularJS Auto Validate
- User feedback with Ladda buttons
Form validation using HTML5
Form validation is the process of pre-validating information entered on a web form by the user before it is sent to the server. It's always better to validate the information on the client side itself. This is because it adds less overhead if the user had to be presented with the form again if the information entered was wrong.
Let's have a look at how form validation can be conducted in HTML5.
In our example, we will show one simple registration form to the user in which the user needs to enter details such as a username, password, email id, and age.
The form will have validation controls to ensure that the user enters the information in a proper manner.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="/lib/bootstrap.js"></script>
<script src="/lib/bootstrap.css"></script>
<h1> gtupapers Global Event</h1>
<div ng-controller="AngularController">
<form>
Enter your user name:
<input type="text" name="name" required><br><br>
Enter your password:
<input type="password"/><br><br>
Enter your email:
<input type="email"/><br><br>
Enter your age:
<input type="number" /><br><br>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
Code Explanation:
- For the text input type, we are using the 'required' attribute. This means that the textbox cannot be empty when the form is submitted, and some sort of text should be present in the textbox.
- The next input type is password. Since the input type is marked as password, when the user enters any text in the field, it will be masked.
- Because the input type is specified as email, the text in the box needs to match the pattern This email address is being protected from spambots. You need JavaScript enabled to view it..
- When the input type is marked as a number, if a user tries to enter any character using the keyboard or alphabet, it will not be entered in the textbox.
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
To see the form validation in action, click the Submit button without entering any information on the screen.
After the submit button is clicked, a pop-up will come showing a validation error that the field needs to be filled.
So the validation for the control which was marked as required, causes the error message to be shown if the user does not enter any value in the text field.
When the user enters any value in the password control, you will notice the '*' symbol used to mask the characters being entered.
Let's then enter wrong email id and click the submit button. After the submit button is clicked, a pop-up will appear showing a validation error that the field needs to have the @ symbol.
So the validation for the control which was marked as an email control will cause the error message to be shown if the user does not enter a proper email id in the text field.
Finally, when you try to enter any characters in the age text control, it will not be entered on the screen. The control will only populate with a value when a number is entered in the control.
Form validation using $dirty, $valid, $invalid, $pristine
AngularJS provides its additional properties for validation. AngularJS provides the following properties for controls for validation purposes
- $dirty – The user has interacted with the control
- $valid – The field content is valid
- $invalid – The field content is invalid
- $pristine – The user has not interacted with the control as yet
Below are the steps which need to be followed to carry out Angular validation.
Step 1) Use the no validate property when declaring the form. This property tells HTML5 that the validation would be done by AngularJS.
Step 2) Ensure that the form has a name defined for it. The reason for doing this is that, when carrying out Angular validation, the form name will be used.
Step 3) Ensure each control also has a name defined for it. The reason for doing this is that, when carrying out Angular validation, the control name will be used.
Step 4) Use the ng-show directive to check for the $dirty, $invalid and $valid properties for the controls.
Let's look at an example, which incorporates the above-mentioned steps.
In our example,
We are just going to have a simple text field in which the user needs to enter a Topic name in the text box. If this is not done, a validation error will be triggered, and the error message will be shown to the user.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="/lib/bootstrap.js"></script>
<script src="/lib/bootstrap.css"></script>
<h1> gtupapers Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
<p>Topic Name:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
</p>
</form>
<script>
var app = angular.module("DemoApp",[]);
app.controller("DemoController",function($scope) {
$scope.Display = function () {
$scope.user='Angular';
}
});
</script>
</body>
</html>
Code Explanation:
- Note we have given a name for the Form which is "myForm". This is required when accessing the controls on the form for AngularJS validation.
- Using the "novalidate" property for ensuring that the HTML form allows AngularJS to carry out the validation.
- We are using the ng-show directive to check for the "$dirty" and "$invalid" property. This means that if the textbox has been modified, then the "$dirty" property value will be true. Also, in the case where the textbox value is null the "$invalid" property will become true. So if both properties are true, then the validation will fail for the control. Hence, if both values are true, the ng-show will also become true, and the span control with the red color characters will be displayed.
- In this, we are checking the "$error" property which also evaluates to true because we have mentioned for the control that value should be entered for the control. In such a case, where there is no data entered in the text box the span control will display the text "Username is required".
- If the textbox control value is invalid, we also want to disable the submit button so that the user cannot submit the form. We are using the "ng-disabled" property for the control to do this based on the conditional value of the "$dirty" and "$invalid" property of the control.
- In the controller, we are just setting the initial value of the textbox value to the text 'AngularJS'. This is just being done to set some default value to the textbox when the form is first displayed. It showcases better on how the validation occurs for the textbox field.
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
When the form is initially displayed, the textbox displays the value of "AngularJS" and the "submit button" is enabled. As soon as you remove the text from the control, the validation error message is enabled, and the Submit button is disabled.
The above screenshot displays two things
- Submit button is disabled
- There is no topic name in Topic text box. Hence, it fires the error message "Username is required."
Form validation using AngularJS Auto Validate
There is a facility in AngularJS to have validated all controls on a form automatically without needing to write custom code for the validation. This can be done by including a custom module called "jcs-AutoValidate."
With this module in place, you don't need to place any special code to carry out the validation or show the error messages. This is all handled by the code inside of the JCS-AutoValidate.
Let's look at a simple example of how to achieve this.
In this example,
We are just going to have a simple form with a textbox control which is a required field. An error message should be displayed if this control is not filled in.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="/lib/jcs-auto-validate.min.js"></script>
<body>
<h1> gtupapers Event</h1>
<div ng-app="DemoApp">
<div class="form-group">
<form name="myForm" novalidate>
<p>Topic Name:<br></p>
<div class="form-group">
<input class="form-control" type="text" id="user" ng-model="user" required="required"/>
</div>
<div>
<div class="form-group">
<input type="submit">
</div>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>
Code Explanation:
- First, we need to include the "jcs-auto-validate.js" script which has all the auto validation functionality.
- We need to ensure that each element including the "div tag" is placed in a "form-group" class.
- Also need to ensure that each element (which is an HTML element such as input control, span control, div control and so on) such as the input controls are also placed in the form-group class.
- Include the jcs-autovalidate in your AngularJS JS module.
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
By default when you run your code the above form will be shown as per the HTML code.
If you try to Submit the form, the error message will pop-up saying, "This field is required." All of this is done by the JCS-AutoValidate option.
User feedbacks with Ladda buttons
The "ladda" buttons is a special framework built for buttons on top of JavaScript to give a visual effect to buttons when they are pressed.
So if a button is given the "ladda" attribute and is pressed, a spin effect will be shown. Also, there are different data styles available for the button to provide additional visual effects.
Let's look at an example, of how to see "ladda" buttons in action. We are just going to see a simple form which has a submit button. When the button is pressed, a spin effect will be shown on the button.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="/lib/jcs-auto-validate.min.js"></script>
<script src="/lib/angular-ladda.js"></script>
<script src="/lib/angular-ladda.min.js"></script>
<script src="/lib/bootstrap.js"></script>
<script src="/lib/bootstrap.css"></script>
<body>
<h1> gtupapers Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<div class="form-group">
<form name="myForm" novalidate ng-submit="submit()">
<div>
<button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);
app.controller('DemoController',function($scope) {
$scope.submitting = false;
$scope.submit = function () {
$scope.submitting = true;
}
});
</script>
</body>
</html>
Code Explanation:
- We are using the "ng-submit" directive to call a function called "submit." This function will be used to change the ladda attribute of the submit button.
- The ladda attribute is a special attribute of the ladda framework. It is this attribute which adds the spin effect to control. We are setting the value of the ladda attribute to the variable submitting.
- The data-style property is again an additional attribute offered by the ladda framework, which just adds a different visual effect to the submit button.
- The 'AngularJS-ladda' module needs to be added to the AngularJS.JS application in order for the ladda framework to work.
- Initially, we are defining and setting the value of a variable called 'submitting' to false. This value is set for the ladda attribute of the submit button. By initially setting this to false we are saying that we don't want the submit button to have the ladda effect as of yet.
- We are declaring a function which is called when the submit button is pressed. In this function, we are setting the 'submitting' to true. This will cause the ladda effect to be applied to the submit button.
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
When the form is initially displayed, the submit button is shown in its simple form.
When the submit button is pressed, the submitting variable in the controller is set to true. This value gets passed to the "ladda" attribute of the submit button which causes the spin effect of the button.
Summary
- Validation for the textbox HTML controls can be done by using the 'required' attribute.
- In HTML5, there are new controls added such as password, email, and number which provide their own set of validations.
- Form validation in AngularJS is taken care of by looking at the $dirty, $valid, $invalid and $pristine values of a form control.
- Auto validation in AngularJS applications can also be achieved by using the JCS-auto validate module.
- Ladda buttons can be added to an Angular.js application to give a bit of an enhanced visual feel to the user when the button is pressed.
