CODEWITHSUNDEEP
angularjsinternationalization
vertti
vertti

Reputation: 7889

Translated form validation in AngularJS

What's the easiest way of changing the default error messages in form validation provided by Angular to another language?

Upvotes: 3

Views: 4938

Answers (2)

ghiscoding
ghiscoding

Reputation: 13214

Why don't you try something easy for a change... :) Well here is my Angular-Validation. I made a project on Github and I think you can't be simpler than that...and yes I also support translation localization, those are saved into an external JSON file:

<!-- example 1 -->
<label for="input1">Simle Integer</label>
<input type="text" name="input1" validation="integer|required" ng-model="form1.input1" />
<span class="validation text-danger"></span>

<!-- example 2 -->
<label for="input2">Alphanumeric + Exact(3) + required</label>
<input type="text" name="input2" validation="alpha|exact_len:3|required" ng-model="form1.input2" />
<span class="validation text-danger"></span>

JSON external file for translation locales

// English version, JSON file (en.json)
{
    "INVALID_ALPHA":        "May only contain letters. ",
    "INVALID_ALPHA_SPACE":  "May only contain letters and spaces. ",
    ...
}

// French version, JSON file (fr.json)
{
    "INVALID_ALPHA":        "Ne doit contenir que des lettres. ",
    "INVALID_ALPHA_SPACE":  "Ne doit contenir que des lettres et espaces. ",
    ...
}

On top of supporting multiple translations, the directive is so crazy simple for validation, that you'll just love it. I can define whatever amount of validation rules (already 25+ type of validators available) under 1 attribute. validation="min_len:2|max_len:10|required|integer" and the error message will always be displayed in the following <span> isn't it beautiful? I think so too hehe... 1 line of code for your input, 1 line of code for the error display, can you beat that? oh and I even support your custom Regex if you want to add. Another bonus, I also support whichever trigger event you want, most common are probably onblur and onkeyup. I really added all the imaginable features I wanted into 1 crazy simple directive.

No more clustered Form with 10 lines of code for 1 input (sorry but always found that ridiculous) when the only little piece you need is 2 lines of code, nothing more, even for an input of 5 validators on it. And no worries about the form not becoming invalid, I took care of that as well, it's all handled the good "Angular" way.

Take a look at my Github project Angular-Validation... I'm sure you'll love it =)
DEMO
Added a live demo on Plunker

Upvotes: 2

lukpaw
lukpaw

Reputation: 1613

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:

enter image description here

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:

enter image description here

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

Plunker example

Upvotes: 3

Related Questions