I wrote a custom validation for a field that’s an array of integers to check if its length is the product of two other integer fields. If this validation doesn’t pass, I add error text to my <div class="cf-field-error"> that dynamically tells the user how many items they need to add to the array and set aria-invalid=“true” on the input . The error text shows up below my input, when approporiate. However, this doesn’t prevent me from publishing the content. Is there any way to prevent the publishing on this custom error by adding some css class/ somehow (how?) adding this custom validation to the list of field validations inside my UI extension/ something else I haven’t thought of? The only two sdk’s I’m including are “contentful-ui-extensions-sdk@3/dist/cf-extension.css” & “contentful-ui-extensions-sdk@3”.
You can make the field required and if the custom validation doesn’t pass, use extension.field.removeValue() to clear the field which will prevent the entry from being published. If the custom validation does pass, just use extension.field.setValue('some value') which would then allow the entry to be published.
Thank you for the quick reply! I might have to do that. Thinking of invoking another type of validation though by perhaps adding some invalid characters to the field so that the user doesn’t loose all their work - for example, if they need to add 4 values and they only have 3 - [1111, 2222,333, xxxx].
If the data to be stored has a standard format, then you can use the regular expression validation to make sure it conforms to your requirements. For example, the validation to make sure there are 4 sets of 4 digits, separated by commas would look like this: \d{4}, \d{4}, \d{4}, \d{4}.
and if the author enters invalid content it would look like this:
Thank you for all your help! Really appreciated. This regex would be great if I had a set number of sets - however, the number of sets required will vary dynamically based on the values I put into the 2 other fields (integer in field 1 x integer in field 2 = number of sets required in field to be validated).
Last question, is on blur event the best option to trigger my validation and use extension.field.removeValue() or is there an event that lets me know that a user is trying to publish that I could use? If I am to use the required validation, it would be great for the user to keep these sets (there could be dozens) in drafts and not lose them as soon as they leave the field.
A good option would be to use another field to actually perform the validation and make that field required. The field that actually stores the value is where the user edits the value and then you have this another field which holds the UI extension and that is required. Only when the first field matches the custom validation rules defined in the UI extension does the it actually write anything to the field. When the first field is edited and those edits don’t pass validations use the removeValue() function which would prevent those edits from being published.
I am trying to do something similar, but if I attach the custom UI extension to the second, other, field, then I’m not sure how I would be able to attach a blur event to the field that the user is editing. Is there an example somewhere that would demonstrate how I can do this?
Check out the UI extension SDK docs. You don’t hook into the blur event of the field but rather use the field.onValueChanged(locale?, cb) function. That will set up an event listener that will fire the provided callback when the user edits the specified field allowing you to validate what was changed and then selectively set the value of the field the UI extension sits on.
Hi,
it has been a few years since this topic was discussed. I am wondering, maybe since then some new options for preventing publishing has been added?
I am doing custom validation for a field (uniqueness across different content types) and really don’t want to delete user input if the validation fails to prevent publishing.
Thanks.
I’m having the same issue as @gleb.kostyunin.
I’m working on a field that is also connect to a remote source and I need to invalidate the field in case the remote gives back a validation error or anything of the sort.
It’s not great for UX if a user’s input gets removed because it’s faulty but there’s not other way to keep the value throughout page loads if I don’t set the contentful field’s value.