I'm using Vuetify v-text-field on a form. I have some basic rules (field required) that I can validate using basic rules (:rules="[ rules.required ]").
But I also have a validation on the server side to enforce uniqueness of this value in the DB. So this can't be validated with simple rules. On my axios call I check for error and set the error-messages (:error-messages="editedItem.errors['fieldname']")
I want the save button to be disabled whenever the form is in error ... but the problem is that once I have set the error-messages, then the form is always in error.
How can I reset it?
I could probably reset the editedItem.errors array every time there is a change on the field. But I find it overkill.
Is there an easier way ?
#focus did the trick for me for now.
Related
I'm trying to access the refresh button in react-admin project. I tried using getElementsbyClassName it returns HTMLComponents Object but it isn't accessible i.e I can see the component on printing it to console but isn't accessible by code. Is there a way for me to disable this refresh button wherever I want?
I'm not sure the exact use case here, but you can create your own custom AppBar that renders essentially whatever you want: https://marmelab.com/react-admin/Theming.html#replacing-the-appbar.
also see this GitHub issue that mentions removing it entirely: https://github.com/marmelab/react-admin/issues/3383
Within your custom AppBar you could have some logic checks within your custom AppBar if you know ahead of time when you'll want it disabled (like on a certain page/component).
If you need it to be more dyanimcally disabled, you could probably have a very high-level context/state to control that as well..
**NOTE: I have built a custom AppBar before, but I haven't done any selective rendering or disabling within it. So, I can't guarantee that this is exactly correct, but it fits with other custom components I've built.
I have a simple v-form which has few fields in it. I have been trying to mark the fields as required by default, but it is not working as expected. I tried using Vee-validate and it has .initial, so that it will mark fields are required by default. But the problem here is, it is template based rendering and it is not working well in some cases, if i add a model to the field.
Example
In the above example Validate button is disabled by default because nothing is filled in the form fields. So here the fields need to show as required, other wise we don't know what to fill in. So how to mark the fields are required by default? is there a option that vuetify is providing or any other package which solves this issue? Thank you.
Update: The fields are actually required, what i mean is, highlighting the fields as Red by default. Display * and all is Needed in my case.
I'm using parsley validation now(super new with this validation) since the caldera form updated their plugin. Any ideas how to place the error messages above the field?
My previous implementation of the error messages is above the field and using jquery validation - error placement.
Thank you.
You should be able to obtain what you want with the right errorContainer option:
Specify the existing DOM container where ParsleyUI should put the errors. It is also possible to configure it with a callback function from javascript, see the annotated source.
I was able to get Aurelia-validation working on a dynamically created form when using the compose element, but I've switched to custom elements for better encapsulation and reuse of the custom controls. However, now my validation seems to be half-broken.
https://gist.run/?id=6e97538c3888cae0f6134faed9d67362
Issue 1: The ValidateBindingBehavior is not doing anything. I suspect it's not finding the controller or matching the rules since the property name is not easily visible in the binding (due to dynamic controls).
Issue 2: For some reason validate() on submit actually only shows the first error instead of all of them. That indicates a problem but I don't know what.
Can anyone get the attached GistRun to work properly?
I am using mark t hughes view picklist custom control from open NTF.
Link to control on openNTF
I have set all the paramenters etc, however when I load the page with the control on, I get my custom error page, and the error below in my error logging database
Error on dialog1button5999 null property/event:
1:
Script interpreter error, line=1, col=35: [ReferenceError]
'compositeData' not found
compositeData.picklistButtonClass + " domfindmebutton5999"
This is trying to set the styleClass of a button in the custom control here:
<xp:this.styleClass><![CDATA[#{javascript:compositeData.picklistButtonClass + " domfindmebutton5999"}]]></xp:this.styleClass>
I am also definately passing this parameter is with the default code:
picklistButtonClass="button2"
I also followed the video Here to the letter, and still get exactly the same issue.
Has anyone come across this before or have any pointers as to where I should be looking to resolve it? Im not sure where to start, as all the instructions and video's explain how to complete the custom properties of the control, but there is never any mention of a need to actually modify any code WITHIN the custom control....
Thanks
(as a side note, I am using bootstrap, should this make any difference)
This is because of the theme definition. Look at the Mark Leusink's blog entry here. http://linqed.eu/2014/08/28/xpages-gotcha-modeconcat-in-your-themes/
If a theme has a "concat" definition, that will be computed at a very early phase. To concat values, it needs to compute the initial value. However, in some cases (e.g. Repeat, Custom control, etc.), the initial value cannot be computed at the page-load section.
For such cases, you can override the theme with a special themeId, as Mark suggested.