AngularJS and reusable, force field validation rules

Question

I need to create a classic, form-based operational web application.

Each form contains some controls, mostly input controls. Many of these controls have validation or behavior rules, some are valid for only one control (independent checks), and some depend on the values ​​of other controls (dependent checks).

In addition, some controls have the same semantic meaning in different forms.

For example, the input field "customer name" should always have a maximum length of 50 characters and be divided between different forms. Another example is that the “documents” combo box is filtered based on the age field (that is: a client with less than 18 year period has different documents). If there are zero documents in this combo, it should completely disappear.

Rules must be centralized and reused. Although I can define the rules in the functions contained in the controllers, I do not want the programmer to remember to add a validation rule for a specific field, because I am sure that it will not.

What I need is a smart way based on AngularJS to define field reuse rules for all forms and a way to get programmers to automatically use these rules in fields. Ideally, the rules should be defined on the server and loaded when necessary, because I will have to repeat the server-side check for obvious security reasons.

I looked at custom angular directives, but I'm not sure if this is the right way to implement such a thing. It really works, but I would like to know how to define cross-field rules and ensure their use.

For example, using the custom directive myCustomerName for the client field name:

app.js var myApp = angular.module ("MyApp", []);

myApp.directive("myCustomerName", 
    function() 
    {
        return 
        {
            restrict: 'E',
            templateUrl: 'customer_name.html' 
        };
    }
);

customer_name.html

<div class="form-group">
    <label for="customerName">Customer Name</label>
    <input type="text" class="form-control" id="customerName" ng-model="customerName">
</div>

... !

:

myApp.directive("ufeCheck", 
    function() 
    {
        return { 
            restrict: 'E',
            templateUrl: function(e, attr) { 
                return attr.type + '.html';
            }
        };
    }
);

html, :

<ufe_check type="customer_name"></ufe_check>
<ufe_check type="customer_age"></ufe_check>

, ? , ?

, , , AngularJS.

Valdr: https://github.com/netceteragroup/valdr , .

Answer 1

, , , . : , , . , " " api. : captcha .

- . /, / , angular on-change .

rules/dsl, js- (node js runtime). dsl, , dsl. , , dsl .

, "" . , - , . , , / , , - , /. ,

Answer 2

. . . , ValidateData .

api , . https://github.com/webadvanced/ng-remote-validate. , :

<!-- This defined input for validation with context for this ng-remote-validate-->
<input type="password" 
       name="currentPassword" 
       placeholder="Current password" 
       ng-model="password.current" 
       ng-remote-validate="/customer/validpassword"
       ng-remote-throttle="550"
       ng-remote-method="GET"
       required>

<!-- This defined input for validation with context for this ng-remote-validate-->
<input type="text" 
       name="email" 
       placeholder="Email address" 
       ng-model="email" 
       ng-remote-validate="[ '/customer/email-registered', '/customer/email-restricted' ]"
       ng-remote-throttle="800"
       ng-remote-method="POST"
       required>

<!-- This wait validation -->
<span class="message" ng-show="myForm.inputName.$pending">validating...</span>

<!-- This submit form an run validation -->
<button type="submit" ng-disabled="myForm.$invalid || myForm.$pending" ng-click="...">Go!</button>