Validation on submit

[torstenrudolf]

I have a question regarding the validation process.
I tried to dig through the code, but I'm not sure if I got it right. I'm also pretty new to angular.

In my examples it seems like, I can submit the form even that there are validation issues.
Is there a full validation before the form gets submitted?
I think that would be a good improvement if not.

Also, can I call a function, that goes through the schema and validates the fields and updates the valid state of the form fields?

[davidlgj]

Hi!

There is no full validation before submit, per design I didn't want schema form to mess around with the submit part, since there might not be one. For instance we're using it and saving any value on 'blur' of the field.

The idea was to keep it "angularish" and that the user could use ng-submit if they wanted and rely on using the form controller (i.e. name on a form tag, https://docs.angularjs.org/api/ng/directive/form) to check if the entire form is valid or not, as you would with any kind of validation in angular. So basically thats the way to check if the form is valid or not. Does that make sense? Should probably be documented better :-)

There is a fine point here though, if you omit fields in your form definition, the form might be valid, but if you validate the model object against the schema it is not valid, which can be a problem if you validate on the backend.

[torstenrudolf]

Thx for this response David!

I think you are right, maybe I wanted to over engineer the whole form part and forgot that its anyway only client side validation. Thx for the tip how to use form validation in angular.

[torstenrudolf]

I'm just wondering whats the angular way to display the errors on submit. The problem are the fields that are unchanged but invalid.

In my submit function i now set the form-controller $dirty and loop over the form-controllers error-fields and set them to $dirty (since the $setDirty() doesn't propagate to child fields).

formCtrl.$setDirty();
 _.each(formCtrl.$error, function (fields, errorType) {
    _.each(fields, function (field) {
        field.$pristine = false;
    });
 });

Probably this should be done with a directive that intercepts the submit event and set a $submitted flag or somethin? But then I would have to change the hasError() code in the schema-validate directive.

[davidlgj]

Good question! I don't have a good answer though :(
Are you using "required" in the schema? Then it should block submit in most browsers I guess.

Currently we hook up a "disabled" attribute on the submit button to formCtrl.$invalid so we just don't run into that problem.

[chachou29]

So there is no way to know the validity of the whole form ?

[davidlgj]

@chachou29 there is! Just check what the form controller says, as you would do with any form in angular. See my comment above.

[torstenrudolf]

@davidlgj Yes, with the required option it should work on most browsers. I just like it better to disable the browser validation and have full control.

Also I think it would not be nice to disable the submit button, since the user doesn't know then what is wrong.

I like this approach here (from section "Manually Checking for Errors" downwards): http://blog.yodersolutions.com/bootstrap-form-validation-done-right-in-angularjs/

Does this look reasonable to you?

[davidlgj]

@torstenrudolf I think it looks very reasonable, although I disagree about disabling the submit button always is a bad thing. If the form has clearly marked "required" fields, then it is clear for the user, either they haven't filled in the entire form or they have a big validation error message to read. Also validating as you type can be both great and a bit of a bother, great when the first invalid character in a "username" directly prompts the user with the rules, but the email validation that just goes wrong is not that fun.

That said schema form should obviously try to support doing "manual" validation on submit and validation on blur instead of on change.

So IMHO a couple of things are needed

1. A way to trigger validation of the form, maybe through an event? It should handle "required" in the schema as well.
2. An option in the form definition on each field, and maybe a global default that can be changed, that says if that field should validate on blur or on change. Having it on each field might be an overkill though.
3. An onBlur option similar to onChange for good measure.

Do you see anything missing?

[chachou29]

Hello David,
I understand i could use angular form properties ($error, $pristine, $dirty, $valid) ... but it's not working ...
The form is named "MyForm' and MyForm.$valid is never defined.
I missed something ?
Philippe

[davidlgj]

@chachou29 But "MyForm" is defined? Could you make a jsfiddle or send me an example? Mail me at david.lgj@gmail.com

[torstenrudolf]

@chachou29 : I assume MyForm is the name of your form? Than this variable is only defined inside the scope of the form.

<form name="myForm" ...>

form is valid: {{ myForm.$valid }}  // that should work
</form>

form is valid: {{ myForm.$valid }}  // that should not work

[torstenrudolf]

@davidlgj I would really like the option to validate on blur! Still I think clicking the "submit" button and then having the required fields highlighted, but probably everyone has it's own taste there ;)

at 1: I think to manage the validation of the form by an event is the right way.
at 2: would be nice if you could set the default inside the form directive like

<form ... sf-validation-on-blur="true"></form>

[chachou29]

Hello,
@davidlgj
Form properties ($error, $pristine, $dirty, $valid) are correctly defined if you do not set a sf-decorator.
http://jsfiddle.net/JV7L4/28/
By the way, what sf-decorator is for ?

@torstenrudolf
Yes, MyForm is the name of my form :-)
Form properties are defined outside the scope of the form. (oufffff)