SAP

Must Learn!

Big Data

Web

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 user name, 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-

Submitting a form using ng-submit

The processes of submitting information on a web page are normally handled by the submit event on the web browser. This event is normally used to send information which the user might have entered on a web page to the server for further processing.

AngularJS also provides a directive called ng-submit which can be used to bind the application to the submit event of the browser.

So in the case of AngularJS, on the submit event you can actually carry out some processing within the controller itself and then display the processed information to the user.

Let's take an example of how we can achieve this.

In our example,

We are going to present a textbox to the user in which they can enter the topic which they want to learn. There will be a submit button on the page, which when pressed will add the topic to an unordered list.

AngularJS Validation – Learn in 10 Minutes!

Code Explanation:

  1. We are first declaring our form HTML tag, which will hold the "text box" and "submit button" control. We are then using the ng-submit directive to bind the function "Display()" to our form. This function will be defined in our controller and will be called when the form is submitted.
  2. We have a text control in which the user will enter the Topic they want to learn. This will be bound to a variable called 'Topic' which will be used in our controller.
  3. There is the normal submit button which the user will click when they have entered the topic they want.
  4. We have used the ng-repeat directive to display a list items of the topics the user enters. The ng-repeat directive goes through each topic in the array 'AllTopic' and displays the topic name accordingly.
  5. In our controller we are declaring an array variable called 'AllTopic.' This will be used to hold all the topics entered by the user in Step2.
  6. We are defining the code for our Display() function which will be called whenever the user clicks the Submit button. Over here we are using the push array function to add the Topics entered by the user via the variable 'Topic' into our array 'AllTopic.'

If the code is executed successfully, the following Output will be shown when you run your code in the browser.

Output:

AngularJS Validation – Learn in 10 Minutes!

To see the code working, first enter a Topic name like "AngularJS" as shown above in the textbox and then click on the Submit button.

AngularJS Validation – Learn in 10 Minutes!

  • After the submit button is clicked, you will see the item which was entered in the textbox added to the list of items.
  • This is being achieved by Display() function, which is called when the submit button is pressed.
  • The Display() function adds the text to the array variable called 'AllTopic.' And our ng-repeat directive goes through each value in the array variable 'AllTopic' and displays them as list items accordingly.

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.

AngularJS Validation – Learn in 10 Minutes!

Code Explanation:

  1. 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.
  2. 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.
  3. 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..
  4. 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:

AngularJS Validation – Learn in 10 Minutes!

To see the form validation in action, click the Submit button without entering any information on the screen.

AngularJS Validation – Learn in 10 Minutes!

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.

AngularJS Validation – Learn in 10 Minutes!

When the user enters any value in the password control, you will notice the '*' symbol used to mask the characters being entered.

AngularJS Validation – Learn in 10 Minutes!

Let's then enter a 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 core Angular.js

AngularJS provides its own 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.

AngularJS Validation – Learn in 10 Minutes!

Code Explanation:

  1. 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.
  2. Using the "novalidate" property for ensuring that the HTML form allows AngularJS to carry out the validation.
  3. 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.
  4. 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".
  5. 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.
  6. 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:

AngularJS Validation – Learn in 10 Minutes!

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 disabled, and the Submit button is disabled.

AngularJS Validation – Learn in 10 Minutes!

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 having the need 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.

AngularJS Validation – Learn in 10 Minutes!

Code Explanation:

  1. First we need to include the "jcs-auto-validate.js" script which has all the auto validation functionality.
  2. We need to ensure that each element including the "div tag" is placed in a "form-group" class.
  3. Also need to ensure that each element (which is basically 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.
  4. 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:

AngularJS Validation – Learn in 10 Minutes!

By default when you run your code the above form will be shown as per the HTML code.

AngularJS Validation – Learn in 10 Minutes!

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.

AngularJS Validation – Learn in 10 Minutes!

Code Explanation:

  1. 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.
  2. 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.
  3. 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.
  4. The 'AngularJS-ladda' module needs to be added to the AngularJS.JS application in order for the ladda framework to work.
  5. 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.
  6. 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:

AngularJS Validation – Learn in 10 Minutes!

When the form is initially displayed, the submit button is shown in its simple form.

AngularJS Validation – Learn in 10 Minutes!

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 cause the spin effect for the button.

Summary

  • The "ng-submit" directive is used to process the input entered by the user when the form is submitted.
  • 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.