Wednesday, 2 September 2020

Nested form validation vuelidate - vuejs 2.6

I have a nested json schema with unknown number of fields. i am using dynamic components to render the input elements.

My question is how do i approach for this kind of challenge to validate my form because i am using v-for to to loop over json schema also there is indefinite number of fields. I am using vuelidate to validate my dynamic form.

Any thoughts of how I can achieve this ?

Below is the json

[
    {
        "title": "Profile Information",
        "fields": [
            {
                "name": "profile",
                "fields": [
                    {
                        "component": "BaseInput",
                        "model": "firstName",
                        "label": "firstName",
                        "name": "firstName",
                        "validations": {
                            "required": {
                                "params": null,
                                "message": "This field is required"
                            },
                            "minLength": {
                                "params": 3,
                                "message": "Please type at least 3 characters"
                            }
                        }
                    }
                ]
            },
            {
                "title": "Contact Info",
                "name": "contact",
                "fields": [
                    {
                        "component": "BaseInput",
                        "model": "email",
                        "name": "email",
                        "label": "email",
                        "validations": {
                            "required": {
                                "params": null,
                                "message": "This field is required"
                            },
                            "minLength": {
                                "params": 3,
                                "message": "Please type at least 3 characters"
                            }
                        }
                    },
                    {
                        "component": "BaseInput",
                        "model": "phone",
                        "name": "phone",
                        "label": "phone",
                        "validations": {
                            "required": {
                                "params": null,
                                "message": "This field is required"
                            },
                            "minLength": {
                                "params": 3,
                                "message": "Please type at least 3 characters"
                            }
                        }
                    },
                    {
                        "name": "links",
                        "title": "Social Information",
                        "fields": [
                            {
                                "component": "BaseInput",
                                "model": "website",
                                "name": "website",
                                "label": "website",
                                "validations": {
                                    "required": {
                                        "params": null,
                                        "message": "This field is required"
                                    },
                                    "minLength": {
                                        "params": 3,
                                        "message": "Please type at least 3 characters"
                                    }
                                }
                            },
                            {
                                "component": "BaseInput",
                                "model": "linkedin",
                                "name": "linkedin",
                                "label": "linkedin",
                                "validations": {
                                    "required": {
                                        "params": null,
                                        "message": "This field is required"
                                    },
                                    "minLength": {
                                        "params": 3,
                                        "message": "Please type at least 3 characters"
                                    }
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        "title": "Address Information",
        "name": "address",
        "fields": [
            {
                "component": "BaseInput",
                "model": "address",
                "name": "address",
                "label": "address",
                "validations": {
                    "required": {
                        "params": null,
                        "message": "This field is required"
                    },
                    "minLength": {
                        "params": 3,
                        "message": "Please type at least 3 characters"
                    }
                }
            }
        ]
    },
    {
        "title": "Work Information",
        "name": "work",
        "fields": [
            {
                "component": "BaseInput",
                "model": "work",
                "name": "work",
                "label": "work",
                "validations": {
                    "required": {
                        "params": null,
                        "message": "This field is required"
                    },
                    "minLength": {
                        "params": 3,
                        "message": "Please type at least 3 characters"
                    }
                }
            }
        ]
    }
]


from Nested form validation vuelidate - vuejs 2.6

No comments:

Post a Comment