Invalid input field

by vaiism

HTML

<script src="http://docs-next.angularjs.org/angular-0.10.3.min.js" ng:autobind></script>

<!-- AngularJS Example Code: -->
<script>
function UserFormCntl() {
  this.state = /^\w\w$/;
  this.zip = /^\d\d\d\d\d$/;
  this.master = {
    customer: 'John Smith',
    address:{
      line1: '123 Main St.',
      city:'Anytown',
      state:'AA',
      zip:'12345'
    }
  };
  this.cancel();
}
 UserFormCntl.prototype = {
  cancel: function() {
    this.form = angular.copy(this.master);
  },
   save: function() {
    this.master = this.form;
    this.cancel();
  }
};
</script>
<div ng:controller="UserFormCntl">
   <form name="userForm">
     <label>Name:</label><br/>
    <input type="text" name="customer" ng:model="form.customer" required/>
    <span class="error" ng:show="userForm.customer.$error.REQUIRED">
      Customer name is required!</span>
    <br/><br/>
     <ng:form name="addressForm">
      <label>Address:</label> <br/>
      <input type="text" name="line1" size="33" required
             ng:model="form.address.line1"/> <br/>
      <input type="text" name="city" size="12" required
             ng:model="form.address.city"/>,
      <input type="text" name="state" ng:pattern="state" size="2" required
             ng:model="form.address.state"/>
      <input type="text" name="zip" ng:pattern="zip" size="5" required
             ng:model="form.address.zip"/><br/><br/>
       <span class="error" ng:show="addressForm.$invalid">
        Incomplete address:
        <span class="error" ng:show="addressForm.state.$error.REQUIRED">
          Missing state!</span>
        <span class="error" ng:show="addressForm.state.$error.PATTERN">
          Invalid state!</span>
        <span class="error" ng:show="addressForm.zip.$error.REQUIRED">
          Missing zip!</span>
        <span class="error" ng:show="addressForm.zip.$error.PATTERN">
          Invalid zip!</span>
      </span>
    </ng:form>
     <button ng:click="cancel()"
           ...

CSS

input.ng-invalid { border: 1px solid red; } 
.ng-form {display: block;}
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
.error { color: red; }

JavaScript

x