I want to write custom validator for validating date given by user as input, Does anyone have idea about writing validator in vuejs2?
You can easily use existing Vue.js plugin like Vee Validate (http://vee-validate.logaretm.com) or Vuelidate (https://monterail.github.io/vuelidate/).
Related
I have a project for which I use VueJS (2.x) for the frontend part.
I've made a component to do some filtering :
And I'd like to be able to change the URL according to the filters, so that I can share the URL and another user would land on the same search. At the stage of my screenshot, the URL should look like : my/long/url?username=test&email=#test. But I don't know how to achieve it.
Currently, when I add/remove a filter, I create a new URLSearchParams object that I commit to the vuex store and with a watch statement I query my backend again with the updated filters.
The thing is that my URL doesn't change, of course, because I do not pass by a this.$router.push(...) or whatever.
Maybe I started it wrong.
What is the good way of achieving this ? Knowing that routing to the same view with a new query part does trigger the error DuplicateNavigation...
Thanks in advance for your help :)
I had achieved something similar to this by using the history.pushState
This basically allows you to modify your URL even if you are not using $router.push
You can follow the URL for more details
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
I wanted to make add and edit operation for an entity suppose Post. There are same fields on both add/edit form. So I wanted to ask can I make the form as a separate component and use it in add.vue and edit.vue? Is it the best way to do that kind of thing in VueJS?
I am asking this because I had visited a lot of codes on the internet where the authors didn't follow that approach and they are making separate forms for add/edit.
Sure you can use same component for both operations.
You just need to handle data flow (call correct api / graphql mutation / form action)
if you have a form that most of its components are not the same use it in Form.vue and add.vue edit.vue create a base component if it`s reusable
make sure to control the data correctly/state.
You should use one component, as you dont want to duplicate code. It's crucial to pass the id of the entity. If the backend receives the entity without the ID then it know it's the add operation (perform an INSERT in a DB). If the ID is set then the backend knows it has to update.
I have a rather big form which I post to an API backend. The form has about 17-20 fields, depending on the status of a checkbox.
My plan is that after the user fills out the form I will validate it using Vuelidate and then display a summary of the data to give the user the possibility of reviewing their data. After the user reviews the data and considers that is correct, it posts the form to the backend API.
To do this, I plan on using Vuex to store the form object, and use the store to display the fields in the form and also on the summary page.
Is this a good approach, to store the form object in Vuex? If so, where I define the validation rules in store.js?
Thank you very much for your feedback!
You don't really need Vuex for this.
You can keep your form validation rules in your component itself. If you have something of a form builder or a different component that takes care of your form, you can keep your validation rules there or accept the entire form model through prop from the Component where you want to use the form.
Once the submission is done, you can pass the data to your Summary page via route itself. Check this out - https://router.vuejs.org/guide/essentials/passing-props.html
Whenever you think about Vuex or any state management solution think about the lifecycle of that data. How long is it needed to persist. In most cases, you'll find that it belongs to one view or two.
Vuex is good for cases where you need a piece of data to persist for way longer, possibly entire duration of the app. Example - User Details, Theme Settings, Experience Configuration etc.
Let me know how it goes.
Thank you for answering my previous questions and I appreciate the effort put in by you in developing Moqui.
In the field tag there is an attribute of validate-parameter so could please elaborate the use of it and how to use that attribute. Thanks in advance :-)
To be specific, it sounds like you are looking at the XML Form field element (form-list.field, form-single.field).
A form field can be validated based on the validation settings in a service parameter (there are many validation options there) or an entity field (just a couple validation options there). This is done automatically when a form submits to a transition that has a single service-call element (i.e. not an actions element), and these attributes are populated automatically. You can also specify manually which service/parameter or entity/field to use for validation.
This is all part of the support in the framework to do client side validation with JavaScript using server-side validation settings. Note that the validations are also done on the server, but you don't have to define/implement them twice.
I need to validate user email input from the site. Of course there is django.core.validation. However is not it easier to just use jquery validation plugin without sending POST data before all fields are valid? Or it is just better to validate threw views? Why?
This is a design decision that you can choose to make. If you need the real-time validation of your fields, then jquery-validation is the way to go.
However, if you want the validation to be done on a postback, you'll be better off using Django's form validation to get the job done.
If you do decide to do the validation on the postback, all of you have to do is use the EmailField and django will take care of the rest.