unable to show the balloon pop up when the input fields are not valid
Question
I am trying to validate the email address fields(single email/multiple email addresses) using bootstrap/angularjs. I have two input fields which takes single email address as input for the first field and single/multiple email addresses as input for the second input field. Issue i'm facing is for the single email input field, it is validating the email address but when i terminated with , or ; it is showing the error. Even though it is single email address entry field if user accidently types , or ; i want to accept it.Similarly with multiple Email field also when user type the valid email id and terminate with , or ; it is not showing as valid email address. Other issue is i want to show the balloon pop up with error message when user click on submit button if the user entered email address is not valid.
Demo which is not working : http://plnkr.co/edit/stBbGYrod6zDqA0vVIMD?p=preview
Working Demo : http://next.plnkr.co/edit/X6ONPdgLAZEcUXhy
In the above working demo, it is showing the error message if the email address is not valid which is correct but if terminated with , or ; it is showing the error and the background of the input field is red.
sample html :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<form name="shareSelectionForm">
<div ng-controller="myCtrl">
<div>
Single email: <input type="email" class="form-control" required name="singleRecipientEmail" ng-model="singleRecipientEmail">
<div ng-show="shareSelectionForm.$submitted || shareSelectionForm.singleRecipientEmail.$touched">
<p class="error-mesg" ng-show="shareSelectionForm.singleRecipientEmail.$error.required">Email Address is not valid</p>
</div>
</div>
<div>
Single/Multiple email: <input type="text" class="form-control" multiple-emails required name="recipientEmail" ng-model="recipientEmail">
<div ng-show="shareSelectionForm.$submitted || shareSelectionForm.recipientEmail.$touched">
<p class="error-mesg" ng-show="shareSelectionForm.recipientEmail.$error.required">Single/Multiple Email Address is not valid</p>
</div>
</div>
<button class="btn btn-primary" type="button" ng-click="submitForm()">Submit</button>
</div>
</form>
</body>
</html>
1 answers
solution1
0 2018-07-07 15:59:32
Update your custom directive code which checks with regex after splitting multiple emails by either , or ; .
app.directive('multipleEmails', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
var emails = viewValue.split(/[ ,;]+/);
var re = /\S+@\S+\.\S+/;
var validityArr = emails.map(function(str) {
if (str.trim()) {
return re.test(str.trim());
} else {
return true;
}
});
console.log(emails, validityArr);
var atLeastOneInvalid = false;
angular.forEach(validityArr, function(value) {
if (value === false)
atLeastOneInvalid = true;
});
if (!atLeastOneInvalid) {
ctrl.$setValidity('multipleEmails', true);
return viewValue;
} else {
ctrl.$setValidity('multipleEmails', false);
return undefined;
}
});
}
};
});
Here I've only updated validityArr to make it valid string even if it ends with , or ;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.