home

AngularJs Login Form Validation

AngularJs can do many thing like creates large ecommerce and CMS and any personal or company website other than that angularJs can do Form Validation with less code and less efforts that will be validated and light weighted. To create basic login form, first we need to initialize application by using ng-app(ng-app bootstrap as a angularJs application) and with assistance of basic html form, in the below we have form assets what we need to do angularJs form validations.

please find the below demo of angularJs login form validation with email and password.

Enter Your Email
* Required Not an E-mail
Enter Your Password
* Required Password is Too Short!!! Password is To Long!!!

If you observe the below screen (image), we have screen of inspect element. You can notice that it has already wired with some predefined and pseudo class, you can see that in inspect screen overview (ng-pristine ng-valid). by default angularJs form directives overwrites with own form directive that gone to work with any nasty inputs as well in next you will understand more on this.

AngularJs Form Email Validation

Form itself have four Basic-States (form own directives)

  1. ng-pristine – This will react when user has enter anything and entered to next step.
  2. ng-dirty – This will reacts when user has entered value in input.
  3. ng-valid – form or inputs are itself valid.
  4. ng-invalid – this will reacts when until user entered right value.

Angularjs Email validation

Email validation is the most high priority subject in login form validation. So here we have email validation in angularjs with all the possibilities. We have snippet code of angularJs email validation, in the below example code what we have is code containing with form, form itself has name called frmv inside we have a input for email filed, allow user to enter an email and input has directive ng-model (user.email) with html required element. To check how the below code is going to work in different ways in different scenario all above fours steps you can see while entering the value in input. Please have a look into below screen shot.

AngularJs Password Validation
Note:- form directive going to give everything in name that is the way you can reference what ever
<form name="frmv">
  <input type="email" name="email"  ng-model="user.email" required/>
</form>

Angularjs Email validation with error message

Will show message as well when user entered the wrong email with using extra element(span) to show error message, same like above form containing with input after we have html span element with ng-show directive (ng-show=”firmv.email.$error. required) initially shows required message for input and next span tag will populate when entered a wrong email (ng-show="frmv.email.$error.email"). We are ready with email validation and in the next step will discuss about password validation.

<form name="frmv">
<input type="email" name="email" ng-model="user.email" required/> <span ng-show=" frmv.email.$dirty &&  frmv.email.$error.required">* Required</span> <span ng-show=" frmv.email.$dirty &&  frmv.email.$error.email">Not an E-mail</span> </form>

AngularJs password validation

After email validation we have another required input filed validation is password validation. We have angularjs model with ng-maxlength and ng-minlength. $dirty means user have to enter something before going to next step.

AngularJs password Min-Length and Max-Length

This is a interesting feature without extra code we can archive, what we have here with two angularJs directives ng-maxlength and ng-minlength with values (5, 10). When user entered less than 5 first message will show (Password is Too Short!!!), if user has entered more than 10 characters the second message will show (Password is Too Long!!!).

<form name="frmv">
  <input type="password" name="password" 
  ng-model="user.password"
  ng-minlength="5"
  ng-maxlength="10"
  required  />
  <span ng-show="frmv.password.$dirty &&  frmv.password.$error.required">* Required</span>
<span ng-show="frmv.password.$dirty && frmv.password.$error.minlength">Password is Too Short!!!</span> <span ng-show="frmv.password.$dirty && frmv.password.$error.maxlength">Password is To Long!!!</span> <button ng-disabled="frmv.$invalid">Log On</button> </form>

in the conclusion of this we have button in form itself, that will disabled until user fulfils the form requirements(all fields should be with required text) like entered overall wrong or something is invalid button will disabled.