{"id":585,"date":"2015-08-26T12:54:00","date_gmt":"2015-08-26T12:54:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=585"},"modified":"2025-02-20T07:57:47","modified_gmt":"2025-02-20T07:57:47","slug":"validating-user-input-in-angular-js","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/validating-user-input-in-angular-js","title":{"rendered":"Validating User Input on a Form in Angular JS"},"content":{"rendered":"\n

I have often seen entry-level developers struggling with user input validation in AngularJS single-page applications. In this post, I will give a quick but useful introduction of validations in AngularJS; consider this post as a base learning document from which you can do further learning.<\/p>\n\n\n\n

Let\u2019s start with an example as shown in the image below. You have a registration form with three fields with the following restrictions.<\/p>\n\n\n\n

    \n
  1. Name: Required<\/li>\n\n\n\n
  2. Email: Required and type Email<\/li>\n\n\n\n
  3. Password: Required, type password and minimum length 6<\/li>\n<\/ol>\n\n\n\n
    \"You<\/figure>\n\n\n\n

    We want to validate the rules mentioned above on the client side. There are two ways client-side validation can be done in an AngularJS based single page application:<\/p>\n\n\n\n

      \n
    • Using the HTML5 validations<\/li>\n\n\n\n
    • Using the AngularJS validation directives<\/li>\n\n\n\n
    • A Combination of both<\/li>\n<\/ul>\n\n\n\n

      HTML5 Validation<\/h2>\n\n\n\n

      Here we\u2019ve created the Add user form shown above using the mark up listed below:<\/p>\n\n\n\n

        <div class=\"row\">\n                <form name=\"adduser\" ng-submit=\"AddUser(adduser.$valid)\">                   \n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <input type=\"text\"\n                               required\n                               name=\"name\"\n                               ng-model=\"userfullName\"\n                               class=\"form-control\"\n                               placeholder=\"Full Name\">\n                    <\/div>\n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <input type=\"email\"\n                               required\n                               name=\"email\"\n                               ng-model=\"useremail\"\n                               class=\"form-control\"                              \n                               placeholder=\"Email\">\n                    <\/div>\n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <input type=\"password\"\n                               required\n                               ng-model=\"userpassword\"\n                               name=\"password\"                             \n                               class=\"form-control \"\n                               placeholder=\"Password atleast 6 character\">\n                    <\/div>\n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <button type=\"submit\" class=\"form-control btn btn-info\">\n                       <\/button>\n                    <\/div>\n                <\/form>\n            <\/div><\/pre>\n\n\n\n
      We are applying all the required user validation using the HTML 5 validations.  When we submit a form with invalid user data, HTML5 will return an error as shown below:<\/p>\n\n\n\n
      \"When<\/figure>\n\n\n\n
      This error on the UI is returned by HTML5. HTML5 validation will not work in browsers that don\u2019t support HTML5. Some points about validation techniques are as follows:<\/p>\n\n\n\n
        \n
      • Validation will not work in browsers does not support HTML5<\/li>\n\n\n\n
      • HTML 5 error (as shown in the image above) will be displayed for the invalid user input<\/li>\n\n\n\n
      • Invalid user input will be set to undefined value in the controller<\/li>\n<\/ul>\n\n\n\n
        Now let\u2019s try to read the value of user inputs in the controller. Do not forget to attach a controller to the form.<\/p>\n\n\n\n
        console.log('user name : ' + $scope.userfullName);\nconsole.log('user email : ' +$scope.useremail);\nconsole.log('user password :' +$scope.userpassword);<\/pre>\n\n\n\n
        Here we are validating the form and user inputs using HTML 5 validation. We are able to submit the form even if some of the inputs are invalid. Invalid input value would be set to the undefined in the controller. As you see in the below image that for the email field, the input is invalid and in the controller, invalid email value is set to undefined.<\/p>\n\n\n\n
        \"We<\/figure>\n\n\n\n
        Two important observations can be drawn from the above validation technique:<\/p>\n\n\n\n
          \n
        1. We were able to submit the form even if the form was not valid<\/li>\n\n\n\n
        2. For the invalid inputs, the value was set to undefined<\/strong> in the controller<\/li>\n<\/ol>\n\n\n\n
          If we want the form not to be submitted when it is invalid, then instead of ng-click on the button, we will use ng-submit directive on the form itself:<\/p>\n\n\n\n
           <div class=\"row\">\n                <form name=\"adduser\" ng-submit=\"AddUser(adduser.$valid)\">                   \n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <input type=\"text\"\n                               required\n                               name=\"name\"\n                               ng-model=\"userfullName\"\n                               class=\"form-control\"\n                               placeholder=\"Full Name\">\n                    <\/div>\n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <input type=\"email\"\n                               required\n                               name=\"email\"\n                               ng-model=\"useremail\"\n                               class=\"form-control\"                              \n                               placeholder=\"Email\">\n                    <\/div>\n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <input type=\"password\"\n                               required\n                               ng-model=\"userpassword\"\n                               name=\"password\"                             \n                               class=\"form-control \"\n                               placeholder=\"Password atleast 6 character\">\n                    <\/div>\n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <button type=\"submit\" class=\"form-control btn btn-info\">\n                       <\/button>\n                    <\/div>\n                <\/form>\n            <\/div><\/pre>\n\n\n\n
          In the ng-submit we calling a function AddUser from the controller with a parameter formname.$valid<\/strong>. This submit function will be only called when a form is valid or in other words, all the user input of the form is valid. Keep in mind that in this case from would not be submitted if the form is not valid. In the previous example, we saw that even if the form was invalid, we were able to submit the form and for invalid input fields undefined value was getting passed in the controller. However here we cannot submit the form if it is not valid.<\/p>\n\n\n\n
          AngularJS Validation<\/h2>\n\n\n\n
          Another option is to validate the user input only using the AngularJS directives. To work with only AngularJS validation, we need to perform the following tasks \u2013<\/p>\n\n\n\n
            \n
          1. Use novalidate on the form to disable HTML validation.<\/li>\n\n\n\n
          2. Instead of HTML validations use AngularJS validation directives.<\/li>\n<\/ol>\n\n\n\n
            We can create the form with required user validations using only the AngularJS validation directives as shown in the listing below:<\/p>\n\n\n\n
            <form name=\"adduser\" novalidate>\n                    <!-- NAME -->\n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <input type=\"text\"\n                               ng-required=\"true\"\n                               name=\"name\"\n                               ng-model=\"userfullName\"\n                               class=\"form-control\"                              \n                               placeholder=\"Full Name\">\n                    <\/div>\n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <input type=\"email\"\n                               ng-required=\"true\"\n                               name=\"email\"\n                               ng-model=\"useremail\"\n                               class=\"form-control\"                             \n                               placeholder=\"Email\">\n                                            <\/div>\n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <input type=\"password\"\n                               ng-required=\"true\"\n                               ng-model=\"userpassword\"\n                               name=\"password\"\n                              ng-minlength=\"5\"\n                               class=\"form-control \"\n                               placeholder=\"Password atleast 6 character\">\n                    <\/div>\n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <button type=\"submit\" ng-click=\"AddUser()\" class=\"form-control btn btn-info\">\n                          Register\n                        <\/button>\n                    <\/div>\n                <\/form><\/pre>\n\n\n\n
            We are using the novalidate attribute to disable HTML5 validation, and validating the following user input:<\/p>\n\n\n\n
              \n
            1. All the fields are required.<\/li>\n\n\n\n
            2. Minimum length of the password field is 6.<\/li>\n<\/ol>\n\n\n\n
              On submitting the form, user input will be validated using the AngularJS validation directives. If the user does not provide a value for the name or provides less than six characters for the password field then the form would be submitted with the value undefined for the invalid user inputs.<\/p>\n\n\n\n
              \"On<\/figure>\n\n\n\n
              As you might have noticed, when we do not use HTML 5 validations and rely on the AngularJS validations, there are two things that happen:<\/p>\n\n\n\n
                \n
              1. Forms are submitted even if all the user inputs are not valid<\/li>\n\n\n\n
              2. No error message is displayed for the invalid user input<\/li>\n<\/ol>\n\n\n\n
                Disable Submit Button If Form Is Not Valid<\/h2>\n\n\n\n
                We can disable the submit button if the form is not valid or any of the user input is invalid. Let us use AngularJS $valid property<\/strong> to disable the submit button if the form is invalid:<\/p>\n\n\n\n
                <form name=\"adduser\" novalidate>\n                    <!-- NAME -->\n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <input type=\"text\"\n                               ng-required=\"true\"\n                               name=\"name\"\n                               ng-model=\"userfullName\"\n                               class=\"form-control\"                              \n                               placeholder=\"Full Name\">\n                    <\/div>\n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <input type=\"email\"\n                               ng-required=\"true\"\n                               name=\"email\"\n                               ng-model=\"useremail\"\n                               class=\"form-control\"                             \n                               placeholder=\"Email\">\n                                            <\/div>\n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <input type=\"password\"\n                               ng-required=\"true\"\n                               ng-model=\"userpassword\"\n                               name=\"password\"\n                              ng-minlength=\"5\"\n                               class=\"form-control \"\n                               placeholder=\"Password atleast 6 character\">\n                    <\/div>\n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <button type=\"submit\" ng-disabled=\"!adduser.$valid\" ng-click=\"AddUser()\" class=\"form-control btn btn-info\">\n                          Register\n                        <\/button>\n                    <\/div>\n                <\/form><\/pre>\n\n\n\n
                Here we\u2019re using the ng-disabled directive to disable the button. As you see in the image below, a $valid property is used to check whether the form is valid or not. Do not forget that adduser<\/strong> is the name of the form.<\/p>\n\n\n\n
                Show the Error Message<\/h2>\n\n\n\n
                Unlike HTML5 validation rules, by default, AngularJS validation directives do not display any error message for the invalid user input. However, we can show the error message as shown in the listing below. We are using $valid and $pristine properties to display the error message:<\/p>\n\n\n\n
                <form name=\"adduser\" novalidate>\n                    <!-- NAME -->\n                    <div id=\"name-group\" class=\"form-group-lg\">\n                        <input type=\"text\"\n                               ng-required=\"true\"\n                               name=\"name\"\n                               ng-model=\"userfullName\"\n                               class=\"form-control\"\n                               placeholder=\"Full Name\">\n                        <span class=\"help-block\"\n                               ng-show=\"adduser.name.$invalid && !adduser.name.$pristine\">\n                            You name is required.\n                        <\/span>\n                  <\/div><\/pre>\n\n\n\n
                The error message will be displayed as shown in the image below:<\/p>\n\n\n\n
                \"<\/figure>\n\n\n\n
                Styling the Error Message and Input Control<\/h2>\n\n\n\n
                Using the $valid and $pristine properties we can display the error message and create a style for it using the listing below:<\/p>\n\n\n\n
                <form name=\"adduser\" novalidate>\n                    <!-- NAME -->\n                    <div id=\"name-group\" class=\"form-group-lg\" ng-class=\"{ 'has-error' : adduser.name.$invalid && !adduser.name.$pristine }\">\n                        <input type=\"text\"\n                               ng-required=\"true\"\n                               name=\"name\"\n                               ng-model=\"userfullName\"\n                               class=\"form-control\"\n                               placeholder=\"Full Name\">\n                        <span class=\"help-block\"\n                               ng-show=\"adduser.name.$invalid && !adduser.name.$pristine\">\n                            You name is required.\n                        <\/span>\n                  <\/div><\/pre>\n\n\n\n
                Now, the error message will be displayed with the style as shown in the image below:<\/p>\n\n\n\n
                \"<\/figure>\n\n\n\n
                Reading Validation Properties in the Controller<\/h2>\n\n\n\n
                In the controller, we can read whether the form is valid or not, using the $valid property on the form name. If all the user input is valid we will get a value of $valid property true. Whether the form is valid or not can be checked in the controller as shown in the listing below:<\/p>\n\n\n\n
                if ($scope.adduser.$valid) {\n   alert('all inputs are valid ');\n}\nelse {\n   alert('all inputs are not valid ');\n}<\/pre>\n\n\n\n
                AngularJS Validation Properties<\/h2>\n\n\n\n
                While working with AngularJS validation, the following are important properties:<\/p>\n\n\n\n
                \"While<\/figure>\n\n\n\n
                We can use these properties along with the form name to perform various validations tasks.  <\/p>\n\n\n\n
                So there you have it! We\u2019ve explored how you can use a combination of HTML5 validations and AngularJS validation directives to validate the form and user inputs in AngularJS. I hope you find this post useful \u2013 thanks for reading!<\/p>\n\n\n\n
                \"<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"
                I have often seen entry-level developers struggling with user input validation in AngularJS single page applications. In this post, I will give a quick but useful introduction of validations in AngularJS; consider this post as a base learning document from which you can do further learning.<\/p>\n","protected":false},"author":65,"featured_media":1282,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,17],"tags":[],"class_list":["post-585","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=585"}],"version-history":[{"count":3,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/585\/revisions"}],"predecessor-version":[{"id":2013,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/585\/revisions\/2013"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/1282"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}