angular form validation

gistfile1.txt

--js----
/** Basic input validator for input text field, it detect empty input and special characters */
app.directive('inputValidator', function() {
    return {
      require: 'ngModel', //ngModelController is required here
      link: function(scope, element, attr, mCtrl) {
        function myValidation(value) {
          if (value.trim()!=="" && new RegExp(/[~`!@#\$%\^&*\/\\\|\?\.,:;"']/g).test(value)==false) {
            mCtrl.$setValidity('charE', true);
          } else {
            mCtrl.$setValidity('charE', false);
          }
          return value;
        }
        mCtrl.$parsers.push(myValidation);
      }
    };
  });
  
  
  --html--
  
  <div class="modal fade" role="dialog" aria-hidden="true" id="modalEntityGroups"> 
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">Create New Entity Group</h4>
            </div>
            <div class="modal-body" style="max-height: 600px; padding-bottom: 0px; overflow-y: auto; overflow-x: hidden;" id="entityBodyContainer">
                <div class="container-fluid">
                    <form name="newEntityGroup" class="form-horizontal">   
                        <div class="form-group" id="entityTypeContainer">                                                                                    
                            <div class="col-md-7">
                                <select class="form-control" ng-model="newGroup.entityType">
                                    <option value="PERSONS">Persons</option>
                                    <option value="PLACES">Places</option>
                                    <option value="COMPANIES">Organizations</option>
                                    <option value="PHONE NUMBER">Phone Numbers</option>
                                    <option value="TARGETS">Targets</option>
                                    <!-- <option value="HERITAGE">Heritage Items</option>                                     -->
                                </select>
                            </div>   
                        </div>  
                      
                        <div class="form-group">                                                          
                            <div class="col-md-7">
                                <input name="entityGroupName" id="entityGroupName" type="text" class="form-control" ng-model="newGroup.groupName" input-validator>
                                <span ng-show="newEntityGroup.entityGroupName.$invalid" class="text-red">*Group name can't be empty or contains special characters</span>                             
                            </div> 
                        </div>
                     </form>
                  </div>
                </div>
            <div class="modal-footer">
                <button ng-show="newEntityGroup.entityGroupName.$valid && newEntityGroup.entityGroupName.$dirty" type="button" class="btn btn-deep-green btn-shadow btn-flat" data-dismiss="modal" ng-click="createGroup()" id="btnAddEntityGroup">Add Entity Group</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>


Form State and Input State
AngularJS is constantly updating the state of both the form and the input fields.

Input fields have the following states:

$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid
They are all properties of the input field, and are either true or false.

Forms have the following states:

$pristine No fields have been modified yet
$dirty One or more have been modified
$invalid The form content is not valid
$valid The form content is valid
$submitted The form is submitted
They are all properties of the form, and are either true or false.

CSS Classes
AngularJS adds CSS classes to forms and input fields depending on their states.

The following classes are added to, or removed from, input fields:

ng-untouched The field has not been touched yet
ng-touched The field has been touched
ng-pristine The field has not been  modified yet
ng-dirty The field has been modified
ng-valid The field content is valid
ng-invalid The field content is not valid
ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
ng-invalid-key Example: ng-invalid-required
The following classes are added to, or removed from, forms:

ng-pristine No fields has not been modified yet
ng-dirty One or more fields has been modified
ng-valid The form content is valid
ng-invalid The form content is not valid
ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
ng-invalid-key Example: ng-invalid-required
The classes are removed if the value they represent is false.

Add styles for these classes to give your application a better and more intuitive user interface.