matfish2 / vue-formular

a comprehensive vue.js form component
https://www.npmjs.com/package/vue-formular
MIT License
43 stars 11 forks source link

Adding errors when using "client" mode #5

Closed asmaps closed 8 years ago

asmaps commented 8 years ago

I can't find a possibility to inject errors into the form when using client. Is there some possibility to call sth like form.setErrors([{name: 'foo', message: 'bar'}]) or add an errors prop to vf-form/vf-field?

If not is it possible to add this functionality?

matfish2 commented 8 years ago

There is no such thing as independently "injecting errors". Errors in a form go hand-in-hand with validation rules. You can set validation rules (including custom ones. See the customRules and messages options) and the error message will be shown when appropriate.

blodone commented 8 years ago

validation error and form errors are 2 different things. even if client side validation succeed there can be server side validation that does return an error...

you cannot rely on client side validation!

matfish2 commented 8 years ago

There IS an option to return server-side validation errors and display them in the status bar. Read the docs. The OP asked about the form with a client prop which means it is NOT sent to the server at all. In that scenario there is no rational to randomly injecting errors.

blodone commented 8 years ago

if you send the form manually to the server with client using vue-resource errors should be displayed somehow... currently i'm injecting them with dom manipulation which is not a good way to do it

matfish2 commented 8 years ago

From the docs:

Server-side validation (when using AJAX to send the form) Sometimes you might want to do some extra validation on the server side, after the form is sent (i.e no client-side validation errors). If server-side validation fails simply return some invalid code (e.g 400). The response content will be displayed in the status bar. To display more than one error, return an array similar to this:

  [
    {
      name: 'username',
      message: 'The username field is required'
    },
    {
      name: 'password',
      message: 'The password must contain at least 6 characters'
    }
  ]
blodone commented 8 years ago

(when using AJAX to send the form) <--- I use client to modify data BEFORE send and AFTER response to handle different API backends

matfish2 commented 8 years ago

As its name implies the client option is to be used for a form which is not sent to the server. If for some reason you do need direct access to the status bar use this: A. set v-ref on your vf-form. B.

this.$refs.form.statusbarMessage = "ERROR!";
this.$refs.form.status = 'danger'; 
blodone commented 8 years ago

anyway its not relevant where the error is generated if the form is "sent" it could also be generated in the client if checking two fields combined.

e.g. first_name = 'foo' last_name = 'bar'

is validated correct checking with the combination of the two (for example to prevent a duplicate entry 'foo bar') leads to an error on both fields client side.

i want to display the message "Duplicate entry" on both fields, not status bar. How to do that?