Advanced AngularJS Form Validation On Non Required Field

In this blog , I will explaine you how to validate a non required field of angularjs form. Form and controllers provide validation services, so that the user can be notified of invalid input.Normally the form validation is very easy in angularjs if you mention “required” on a field. If your form have some fields which are not necessary but if user fill that fields than its programmer responsibilty to validate them. It is very easy to create a form in html by using angularjs directive. In this example, I explaine only the non required fields. In this form a “phoneNumber” field is not mendatory for the form submittion. But if user want to fill the phoneNumber then we have to apply validation on it.

Phone Number {{phoneNumber}} Phonenumber must be minimum of 10 

Enter your valid phone number.


Publish

Why I call this Advanced AngularJS validation?

Normally we provide the option of one phone number and validate that.But in this example we provide the mutiple phone number option because a user have more than one phone number.Now this form validation becomes complicated because we have to validate a complete array of phone number. If we provide only one phone number than we can validate it by using “ng-pattern” in DOM. But in case of “ng-repeat” , this logic won't work.For this we have to create a “ng-blur” because a blur event fire when an element has lost focus.

When element has lost focus than we call a function on check the validation of phone number.That function defined in controller i.e. checkNumber(). This function take a argument i.e. current phone number.

We define a “$scope.trader.phoneNumber” array in controller which carry all phone number entered by user.

$scope.PHONE_REGEXP = /^[(]{0,1}[0-9]{3}[)\.\- ]{0,1}[0-9]{3}[\.\- ]{0,1}[0-9]{4}$/;$scope.EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*$/i;
$scope.trader.phoneNumber = [];
$scope.ranges = [{}];

$scope.postTradeUser = function(advertismentForm, trade) {
			if ($scope.phoneFlag == true || $scope.emailFlag == true){ 
				console.log("flag=true")
			    return	
			}
			//form submitting code........
}

$scope.phoneFlag=false;

$scope.checkNumber=function(phone){
	var range=$scope.ranges.length
	for(var i=0;i

In this example , we take a flag variable i.e $scope.phoneFlag. On the behalf of this flag variable we show the alert box of validation. In the beginning, the value of the flag is “false”. If the phoneNumber does not match with $scope.PHONE_REGEXP pattern then flag will be “true”. When we click on “publish” button then a postTradeUser() function call. In the beginning of this function we check the flag value , if flag is true then return the function otherwise submit the form.

I hope this will be helpful for you.

Thankyou

Rohit Kaushik