matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance form logic property resolver and validation UI

Browse Source 
- Refactor `shouldBeRequired()` method in FormLogicPropertyResolver for clearer logic and better handling of conditional requirements
- Add comprehensive test cases for dynamic field requirement logic
- Update CustomFieldValidation component with improved UI and guidance for validation setup
- Improve error message and validation rule description in form validation interface
This commit is contained in:
Julien Nahum
2025-02-11 15:05:27 +01:00
parent f5b9b86c16
commit 853760484c
3 changed files with 142 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
client/components/open/forms/components/CustomFieldValidation.vue
View File

@@ -1,33 +1,51 @@
<template>
<div class="py-2 px-4">
<p class="text-gray-500 text-xs mb-3">
Add some custom validation. Save your form before testing.
</p>
<div class="py-2">
<p class="font-semibold text-sm text-gray-700">
Validation criteria for field acceptance
</p>
<condition-editor
ref="filter-editor"
v-model="validation.conditions"
class="mt-1 border-t border rounded-md mb-3"
:form="form"
/>
<text-input
name="error_message"
class=""
:form="field.validation"
label="Error message"
help="Displayed when the validation fails"
<div class="space-y-4">
<!-- Step 1: Validation Rules -->
<div>
<h3 class="font-medium text-gray-900 text-sm mb-1">
Step 1: Set Validation Rules
</h3>
<p class="text-gray-500 text-xs mb-3">
Define <span class="font-semibold">conditions that must be met</span> for this field to be valid. If these conditions are not met, the field will be marked as invalid.
</p>
<condition-editor
ref="filter-editor"
v-model="validation.conditions"
class="mt-1 border-t border rounded-md"
:form="form"
/>
</div>
<!-- Step 2: Error Message -->
<div>
<h3 class="font-medium text-gray-900 text-sm mb-1">
Step 2: Set Error Message
</h3>
<p class="text-gray-500 text-xs mb-2">
Enter the message that will be <span class="font-semibold">shown to users when the validation rules above are not met</span>.
</p>
<text-input
name="error_message"
:form="field.validation"
label="Error message"
/>
</div>
<UAlert
icon="i-heroicons-information-circle"
color="yellow"
variant="subtle"
size="sm"
description="Remember to save your form to apply these validation rules."
/>
</div>
</div>
</template>
<script>
import ConditionEditor from "./form-logic-components/ConditionEditor.client.vue"
import { default as _has } from "lodash/has"
import ConditionEditor from "./form-logic-components/ConditionEditor.client.vue"
export default {
name: 'FormValidation',
components: {ConditionEditor},