Software design for Client side form validation

Question

So Im using the MEAN framework to build my web app. Like all other apps it requires a login & registration.

My Approach so far has been:

1. Every major function of my app has its own AngularJS controller
2. I have a data filter controller, which helps to filter data within the app. But my filter controller DOES NOT connect to the server it self. I created a AngularJS service that handles all actions with the server.
3. And I have a "login controller"

The login controller is responsible for as the name suggests handling logins.

My Question:

My question then is that is carrying out Client Side form validation (i.e checking the fields are not empty, the email is of correct format etc) within a angularJS controller a good design approach?

Should I create a service that handles all the validation? Should the validation functions be private (i.e in javascript modules). Whats the best design approach for this?

Below is my login controller code:

login.controller('login', function($scope){

$scope.checkValidEmail = function(){
   var elem = document.getElementById("email");
   var err = document.getElementById("emailErrorMessage");
   var emailLabel = document.getElementById("emailLabel");
   var success = document.getElementById("emailSuccessMessage");
   var email = $scope.userEmail.toLowerCase();

   var atpos = email.indexOf("@");
   var dotpos = email.lastIndexOf(".");

   if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {

       success.style.display = "none";
       err.style.display = "-webkit-inline-box";
       elem.style.borderColor = "#ef4d23";
       elem.style.backgroundImage = "url(./img/error_sign.png)";
       elem.style.backgroundRepeat = "no-repeat";
       elem.style.backgroundPosition = "325px";
       elem.style.backgroundSize = "16px 15px";
       emailLabel.style.display = "none";
       err.style.color = "#ef4d23";
       err.innerHTML = "Email address is incorrect!";
       $scope.valid = true;

       return false;
   } else {
       success.style.display = "-webkit-inline-box";
       success.style.color = "#27ae60";
       success.innerHTML = "Email looks great!";
       err.style.display = "none";
       elem.style.borderColor = "#27ae60";
       elem.style.backgroundImage = "url(./img/correct_sign.png)";
       elem.style.backgroundRepeat = "no-repeat";
       elem.style.backgroundPosition = "325px";
       elem.style.backgroundSize = "12px 16px";
       $scope.valid = false;
   }
  };
});

Answer 1

My question then is that is carrying out Client Side form validation (i.e checking the fields are not empty, the email is of correct format etc) within a angularJS controller a good design approach?

Not on itself (angular uses a specific controller to do that for you), but the way you are using it is horrible:

var elem = document.getElementById("email");
...
success.style.display = "-webkit-inline-box";

AngularJS provides bindings. You are completely avoiding those and accessing your View from your Controller (bad!) and modifying your view from your controller by adding CSS rules (even worse!).

Should I create a service that handles all the validation? Should the validation functions be private (i.e in javascript modules). Whats the best design approach for this?

You could do that, sure, but the best approach to do that is to use Angular the way it is supposed to be used. Take a look at the Forms developer guide:

<input type="email" ng-model="user.email" name="uEmail" required="" />
<br />
<div ng-show="form.$submitted || form.uEmail.$touched">
  <!-- could aldo use ngClass to add a CSS class on error -->
  <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
  <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>

You keep your validation on the View side, just like it is supposed to be, and bind your models to your controllers so they are much cleaner.

Answer 2

I am amazed why you are using controller function to validate your form. You are using MEAN framework so you should use angular built-in directives to validate your form. It's better, fast and easy so.

Angular Form Validation:

   <form name="myForm">
     <input type="text" name="name" ng-required="true" />                   
     <p class="help-block" ng-if="myForm.name.$dirty && myForm.name.$error.required">
        <i><b>Name</b></i> is required.
     </p>
    </form>

Like this you can do for email, number etc. For Full reference: click here