输入字段无效时，无法显示气球弹出

Question

I am trying to validate the email address fields(single email/multiple email addresses) using bootstrap/angularjs. 我正在尝试使用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.Similarly与多个电子邮件领域也当用户输入有效的电子邮件ID和终止,或; 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 演示不起作用： http : //plnkr.co/edit/stBbGYrod6zDqA0vVIMD?p=preview

Working Demo : http://next.plnkr.co/edit/X6ONPdgLAZEcUXhy 工作演示： 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：

<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>

Answer 1

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 ; 在这里，我只更新了validityArr以使其成为有效的字符串，即使它以,或;结尾;

Updated Working Example 更新的工作示例

输入字段无效时，无法显示气球弹出

问题描述

1 个解决方案

解决方案1
0 2018-07-07 15:59:32

输入字段无效时，无法显示气球弹出

问题描述

1 个解决方案

解决方案1 0 2018-07-07 15:59:32

解决方案1
0 2018-07-07 15:59:32