how to add a css class if validation is not done correctly in angularjs

Question

i want my textbox border color red on button click if input is not valid by adding css class using js. also at place of alert i want a message beside of textbox which will show after condition failed or satisfied.

var app=angular.module('NewApp', ['ngRoute']);


app.config(function($locationProvider, $routeProvider) {
	console.log("controller me");
	$locationProvider.html5Mode(true);
	$routeProvider
	.when('/about',{
		templateUrl: "about.html"
	})
	.otherwise({
		templateUrl: "new.html"
	});
});


app.controller('sbmitCtrl', function($scope, $http, $location){
	$scope.Submit=function(){
		console.log("btn clicked");
		console.log("$scope.inputEmail"+ $scope.inputEmail);
      
      
      var regemail=/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      var regmob = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/;
      
      console.log("mobno"+regmob.test($scope.inputEmail));
     
      if (regemail.test($scope.inputEmail) || regmob.test($scope.inputEmail)) {
      	alert("matched");  
      }
      else {
      	alert("not matched")
      }
      
      

};
});

.xt-error {
    border: 1px solid red;
    color: red;
}

.xt-error:focus {
    border: 1px solid red;
    box-shadow: 0 0 2px red;
}

<!--index.html-->

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>

<body ng-app="NewApp">
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
  <script src="js/n.js"></script>
<ng-view></ng-view>
</body>
</html>

<!-- begin snippet: js hide: false console: true babel: false -->

Your code snippet is broken.

RamblinRose
– RamblinRose

2017-01-06 15:34:08 +00:00
Commented Jan 6, 2017 at 15:34 — RamblinRose
– RamblinRose, Commented Jan 6, 2017 at 15:34
Can you please show your view where your buttons are added

Beslinda N.
– Beslinda N.

2017-01-06 15:44:40 +00:00
Commented Jan 6, 2017 at 15:44 — Beslinda N.
– Beslinda N., Commented Jan 6, 2017 at 15:44

Sreehari S · Accepted Answer · 2017-01-06 16:01:32Z

1

<input ng-class="xt-error: error;">
<div ng-show="error">{{myErrorMessage}}<div>

And set $scope.error =true; when validation error occur.

answered Jan 6, 2017 at 16:01

Sreehari S

3881 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Facundo La Rocca · Accepted Answer · 2017-01-06 15:57:32Z

1

Why dont you use JQuery add/remove functions? Like this:

if (regemail.test($scope.inputEmail) || regmob.test($scope.inputEmail)) {
  alert("matched");
  //Select your input  
  $("your-selector").removeClass("error-class");
  $("your-selector").addClass("ok-class");
}
else {
  alert("not matched");
  //Select your input
  $("your-selector").removeClass("ok-class");
  $("your-selector").addClass("error-class");
}

Try this for AngularJS:

if (regemail.test($scope.inputEmail) || regmob.test($scope.inputEmail)) {
  alert("matched");
  //Select your input  
  var myEl = angular.element( document.querySelector( 'your-selector' ) );
  myEl.addClass('error-class');
  myEl.addClass('ok-class');
}
else {
  alert("not matched");
  //Select your input  
  var myEl = angular.element( document.querySelector( 'your-selector' ) );
  myEl.addClass('ok-class');
  myEl.addClass('error-class');
}

edited Jan 6, 2017 at 15:57

answered Jan 6, 2017 at 15:31

Facundo La Rocca

3,8862 gold badges30 silver badges50 bronze badges

3 Comments

Sunny Over a year ago

thanks but what i have to do if i wish to have same thing using angular js.

Alex Ruiz Over a year ago

I'd suggest trying the more "Angular" route and make use of the ng-class directive.

Sunny Over a year ago

can i have solution along with view Facundo

Collectives™ on Stack Overflow

how to add a css class if validation is not done correctly in angularjs

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related