Translated form validation in AngularJS

angularjs, internationalization

Solution

If I'm not mistaken, you think about html5 validation.

Something like this:

<b>HTML5 validation</b>
<form>
  First name:
  <input type="text" name="firstName" required="" />
  <br />
  Last name:
  <input type="text" name="lastName" required="" />
  <br />
  <input type="submit" value="Submit" />
</form>

If user click on the Submit button he will see:

I think that this error comment you cannot change because it depends on the user browser/computer settings.

Maybe you should try to use angularjs validation (first add to form novalidate to switch off HTML5 validation):

HTML

<div ng-controller="PersonController">
  <b>AngularJS validation</b>
  <form novalidate name="myForm">
    First name:
    <input type="text" name="firstName" ng-model="newPerson.firstName" required="" />
    <span style="color: red" ng-show="myForm.firstName.$dirty && myForm.firstName.$invalid">First name is required</span>
    <br />
    Last name:
    <input type="text" name="lastName" ng-model="newPerson.lastName" required="" />
    <span style="color: red" ng-show="myForm.lastName.$dirty && myForm.lastName.$invalid">Last name is required</span>
    <br />
    <button ng-click="resetPerson()">Reset</button>
    <button ng-click="addPerson()" ng-disabled="myForm.$invalid">Save</button>
  </form>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('PersonController', ['$scope',
  function($scope) {

    var emptyPerson = {
      firstName: null,
      lastName: null
    };

    $scope.addPerson = function() {
      alert('New person added ' + $scope.newPerson.firstName + ' ' + $scope.newPerson.lastName);
      $scope.resetAdvert();
    };

    $scope.resetPerson = function() {
      $scope.newPerson = angular.copy(emptyPerson);
      // I don't know why not work in plunker
      //$scope.myForm.$setPristine();
    };

    $scope.resetPerson();
  }
]);

If user fill the field and erase he will see the error info:

The submit button will be disabled if user don't fill the required fields.

Plunker example

Problem

Original source