Search code examples
javascriptangularjsformsvalidationng-pattern

AngularJS show email field error on submit?

I have a form in Angular JS 1.5.11.

I have it set up to show an error message for empty required fields on form submit. I need to add the ability to also detect if an email is valid on submit.

So far, I can't get this to work. I tried using the "built-in" email field validation, the tried an ng-pattern. Still, no matter what you type in the field, it shows no error. Only the empty field show an error.

<div class="row">
 <div class="col-md-12">
   <div class="form-group" ng-class="{ 'has-error' : abc.myForm.$submitted && abc.myForm.email.$error.required && abc.myForm.email.$error.pattern  }">
  <label>Email</label>
  <input type="email" name="email" class="form-control" ng-model="abc.user.email" ng-pattern="emailFormat" required>
  <p class="help-block error-block">Enter a valid email address.</p>
  </div>
 </div>
</div>

See the whole form at https://plnkr.co/edit/3lAMOM3agSMGC9AAr2IT?p=preview

Update

To clarify, I am using novalidate because I don't want to use the HTML5 built-in error message. If I remove that, I get

enter image description here

instead of

enter image description here

Solution

  • See, type email is HTML5 property and if you put no validate in form, default validation of HTML5 will not work. Remove novalidate from form and use it.

    <!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as abc">
  <p>Hello {{abc.name}}!</p>
  <form name="abc.myForm" ng-submit="abc.save(abc.user)" >
    <div class="row">
      <div class="col-md-12">
        <div class="form-group" ng-class="{ 'has-error' : abc.myForm.$submitted && (abc.myForm.email.$error.required || abc.myForm.email.$error.pattern)  }">
          <label>Email</label>
          <input ng-pattern = '/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i' type="email" name="email" class="form-control" ng-model="abc.user.email" required="" />
          <p class="help-block error-block">Enter a valid email address.</p>
        </div>
      </div>
    </div>

    <p ng-show="abc.myForm.email.$error.pattern">
      Not valid email!
    </p>

    <input type="submit" class="btn btn-primary">

  </form>


</body>

</html>