Perform validation on submit

[vadimsg]

Can't find solution to validate text box before submitting the form. I have some text box inputs and I need to validate them when I click the submit button. Is that event possible without hacking?

[boris-glumpler]

I'm just now having the same problem. It'd be really helpful if there was a way to manually trigger validation of all text boxes and selects.

[boris-glumpler]

Here's what I ended up doing. Might help someone. All my forms have an underlying model, so I specified the validation rules again on the model. Has the advantage that I can then also use validation methods that interact with other fields, like confirmed. Then there is a isValid method on the model that I call when the form is submitted. If there are validation errors then I broadcast them manually to the UI elements via ui-input::set-validity. Works quite well.

[vadimsg]

@shabushabu could you provide a simple example of that form and methods that do work?

[ghost]

@shabushabu thank you . can you make gist or codepen example for validation code the code ?

[Pwntus]

I'm having the exact same problem. I've got a form with multiple UiTextboxes that have validation rules set up and are validating "on their own". When I click submit, a method is triggered and I want to check the valid prop for each UiTextbox. Can anyone tell/show how to access these props? Thanks.

Edit: I'm using Vue JS 2 and the next-branch of @LucasIcarus and by simply binding the valid prop by doing :valid.sync="somevar" won't work.

[JosephusPaye]

v1.0 of Keen UI with Vue 2 support is now ready and will be launched tomorrow.

In the new version, validation happens externally (outside the components) and the components only accept valid (is it valid?) and error (the validation error if not valid) props. So your case will have to be handled externally using something like vuelidate or a custom wrapper around validatorjs.