Add support to onboard error message explicitly.

[tshi0912]

Hi huei90,
First of all, thanks to provide so useful validation module in angular world. I like it very much.
It's powerful to validate the form input, textarea and select control in client side, but it's only in client side.
In many cases, we want to provide a consolidated way to feed back the error messages from server side validation to the specific form controls, say, validate whether the userName is duplicated and show the "user name xxx is occupied" label beside the userName input. Since the validation is occurred on server side, we can't pre-define the errors in front-end rules. So if the module provide such a API

$validationProvider.showErrors(form, errors)

It will be very helpful. Hence we can config the consolidated error/exception handling in angular config:

.config(['app', '$httpProvider', '$validationProvider', function (app, $httpProvider, $validationProvider){
    $httpProvider.defaults.transformResponse.push(function (data, headersGetter) {
        ...
        else if(data.code === 'VALIDATION_ERROR'){
            var forms = app.$rootScope.forms || {};
            var form = forms[headersGetter('x-form-id')];
            $validationProvider.showErrors(form, data.fieldErrors);
        } 
        ...
    }
} 

[tshi0912]

I have provide a pull request about this feature.
#126

[hueitan]

How about invalidCallback?
https://github.com/huei90/angular-validation/blob/master/API.md#add-valid-callback-function-invalid-callback--valid-callback

[tshi0912]

The "invalidCallback" can not perform this feature well. Since the validations invoked from back-end, we can't make sure the label messages, besides, it should be handled globally,developers don't want to setup invalidCallback for every inputs.

[hueitan]

Hi @tshi0912
We still have the global invalidCallback to use and didn't list in API.md
https://github.com/huei90/angular-validation/blob/master/src/provider.js#L280

You can use config to define your invalidCallback

Is this the one you mentioned?

[tshi0912]

看了下代码，估计invalidCallback还是做不到的，我的目标是能将后台返回的错误消息设置到相应的控件上（以Angular Validation插件应有的方式），invalidCallback只是提供了一个回调点，其他的功能，譬如显示提示label啥的都没有。

[hueitan]

后台设置返回的错误消息

是指需要用到 ajax 嗎，然後回傳 response 的資料？

[tshi0912]

是的，通过ajax由后端返回某种格式的对象，然后前端检查格式对象中的返回码，譬如code==2，代表返回的是验证错误，则其中的数据对象包含了错误文本数组，通过调用$validationProvider.showErrors(form, data.fieldErrors);显示。

[hueitan]

那你可以用 setExpression()
https://github.com/huei90/angular-validation/blob/master/API.md#setup-a-new-validation-setexpression-setdefaultmsg-with-regexp-or-function-in-config-phase

因為 angular-validation 已經幫你做好 promise 的部分，你只要回傳 return $q ... 即可。

[tshi0912]

(⊙o⊙)…额，你还是没明白我的意思。$validationProvider.showErrors(form, data.fieldErrors);这样的API是用来统一处理验证异常的。也就是所有的后端验证错误都是通过统一调用一次这个API就全部处理掉了。因为在我的程序里面，不管前端做不做校验，后端还是全部要再做一遍的，他不是处理单个验证逻辑，也不是用定义表达式或校验规则的方式就能搞定的。这是一种普适的处理，对ajax返回的结果进行统一监控处理，如果发现是验证出错，则定位到具体的表单，将错误文本按字段反馈到不同的input控件中。

[hueitan]

发现是验证出错，则定位到具体的表单
将错误文本按字段反馈到不同的input控件

Since you are doing backend validation, why do you need to do again the client-side validation? Are you really need that?

[tshi0912]

It's not re-validating on client-side. It just feed back the errors (which produced by back-end validations) into client-side input controls.

[hueitan]

Good, your concern is right.

I have saw your code

$validationProvider.showErrors(form, errors)

You just want to check the specific form but not trigger from the submit?

Am I right?

[tshi0912]

Yes, you got it.

[hueitan]

Unfortunately, you cannot check the form valid without submitting first.
Without trigger submit, you can't even know the validity of the form.

[hueitan]

Open it if you have any question. 🍻

[tshi0912]

Sometimes the Form is validated by server side, they just want flow the error messages into the form fields.That's it.

[hueitan]

I'm trying to rethink about this feature now.

[tshi0912]

This kind of feature is really useful, since the validation always need to be taken on both client & server side.

[boiawang]

@tshi0912 is right. I have the same issue.

[hueitan]

Hi @boiawang Do you mind showing us your case, i need more use case to define the spec of using this feature.

[boiawang]

举个栗子： 修改密码，服务端返回原密码错误，然后我想把错误显示在密码框下面，这种用setExpression是不能实现的

[hueitan]

我在想的是，因為其實這也是 validate 的功能，只是不要把錯誤訊息顯示出來。是不是有什麼比較好的方式可以達到同樣效果。

[tshi0912]

@huiei90 yeah!

[hueitan]

@boiawang 請問你的例子中，為何 “错误显示在密码框下面” 不行呢？

這個錯誤顯示是指後段傳回的錯誤訊息嗎？

[mikylebaksh]

I know this is an old question, but I was wondering if there was any update to this. In our use case we are implementing a feature to sign up for our site. We have a email text box, and after pressing the submit button we check on the server side if the email already exists. If it does exist we need to return a message that says 'Email already in use'. This message ideally would appear under the email text box.

Do you have a suggestion on how to implement this?